# ReactNative Knowledge Share --- ## React (for Web) Basics Virtual Dom and Reconciliation --- ![https://www.systango.com/blog/wp-content/uploads/2017/05/img_2-1024x613.png](https://www.systango.com/blog/wp-content/uploads/2017/05/img_2-1024x613.png) --- * `DIFF` is a set of instructions for applying the change to the DOM * Optimizations like scheduling and batching --- ## _Old_ React Native Architecture --- ![](https://i.imgur.com/zuF0IHU.png) --- ![](https://i.imgur.com/smBwW50.png) --- ![](https://i.imgur.com/amOvf58.png) --- ![](https://i.imgur.com/4k2dAS8.png) --- ![](https://i.imgur.com/bO0Rw2y.png) --- ![](https://i.imgur.com/lPfkNfJ.png) --- ## _Future_ React Native Architecture --- <!--JSI--> ![](https://i.imgur.com/NDj1STd.png) --- <!--JSI--> [JSI in GitHub](https://github.com/facebook/react-native/blob/master/ReactCommon/jsi/jsi/jsi.h) --- <!--Turbo Modules--> ![](https://i.imgur.com/C4nQQnM.png) --- <!--Turbo Modules--> ![](https://i.imgur.com/FwmSybt.png) --- <!--Fabric--> ![](https://i.imgur.com/5Ntmehe.png) --- ![](https://i.imgur.com/TbKB9xF.png) --- <!--CodeGen--> ![](https://i.imgur.com/AOriDDi.png) --- --- ![](https://i.imgur.com/JtLorh4.jpg) --- ### Hermes ![hermes](https://facebook.github.io/react-native/docs/assets/HermesLogo.svg) --- ### Hermes * OS JS engine optimized for running React Native apps on **Android** * Improved startup * Decreased memory * Opt-in (`enableHermes:true` `build.gradle`) --- ### Hemres ![hermes](https://engineering.fb.com/wp-content/uploads/2019/07/HermesOSSChainReact_blog_FIN_1-1.gif) --- ### Hemres * Bytecode precompilation * No JIT * Garbage collector strategy --- ### Glossary * Metro * The Bridge * Yoga * JSI * Fabric * TurboModules * Hermes --- # Resources - [RN's new architecture - Glossary of terms](http://blog.nparashuram.com/2019/01/react-natives-new-architecture-glossary.html) - [react-native-past-future-and-present slide deck](https://speakerdeck.com/kelset/react-native-past-future-and-present) - [The New RN Architecture Explained 4 part blog](https://formidable.com/blog/2019/react-codegen-part-1/) - [RN's New Architecture - Parashuram N - React Conf 2018](https://www.youtube.com/watch?time_continue=9&v=UcqRXTriUVI) - [RN community discussions repo](https://github.com/react-native-community/discussions-and-proposals) - [JSI](https://github.com/react-native-community/discussions-and-proposals/issues/91) - [Turbo Modules](https://github.com/react-native-community/discussions-and-proposals/issues/40) - [Fabirc](https://github.com/react-native-community/discussions-and-proposals/issues/4) - [CodeGen](https://github.com/react-native-community/discussions-and-proposals/issues/92) - [Hermes blog](https://engineering.fb.com/android/hermes/)