On React Native for Android architecture

Facebook released React Native for Android in 2015.9.15, extending JavaScript development technology to the Android platform. React Native allows developers to write applications using JavaScript and React, using the same core code to create native apps based on the Web,ios and Android platforms. This article will analyze the architecture of Android react and related basic knowledge.
Environmental construction and debugging relevant knowledge of the official website documents can be, this article will not repeat.

I. REACT architecture analysis 1. Hierarchical architecture:

Java layer: Java layer for the logical portal, start the C + + layer of the JavaScript parser, the implementation of JS through C + + delivery of rendering instructions, so as to build nativeui and so on. Java layer relies on a number of excellent open source libraries, in the image processing using fresco, network communications using okhttp, of course, there are many tools, such as JSON parsing tools jackson,animation well-known open Source Library Nineoldandroids, Comprehensive Rollup's underlying tool class bolts, etc., are encapsulated as module in the Java layer. Java Layer Core Jar package is React-native.jar, encapsulates a lot of upper interface, such as Module,registry,bridge, the following will be the app's enabling process, the full analysis of the Java layer architecture.

C + + layer: The C + + layer is the most important encapsulation of javascriptcore, the implementation of JS parsing. Based on Javascriptcore,web developers can enjoy the new features of ES6, such as class, arrow operators, and React native run in JavaScriptCore, there is no browser-compatible situation. Bridge bridges the core interface of Java <> JS communication. Jsloader is mainly to load from the assets directory or local file to JavaScriptCore, and then parse the JS file by Jscexectutor.

JS Layer: The main processing event distribution and UI Layout, mainly has the following parts:

• The Virtual Dom written by Component:js Js/jsx to build the Component or Module,virtual Dom is a lightweight representation of the DOM in memory and can be used to generate the UI under different platforms through different rendering engines. The use of component is extremely important in React because the presence of component makes it more efficient to compute DOM diff.

• The Lifecycle&data:react component controls the life cycle and event callbacks through the internal state variables. If the Getinitialstate method is used to define the initial state of the component, subsequent components can read the state through the This.state property. When an event is triggered (or the SetState method is actively called to update the data) causing a state change, the This.setstate method modifies the state value and, after each modification, automatically calls the This.render method to re-render the component.

• Layout:react uses JavaScript to implement Flexbox, does not rely on the DOM, can be compiled into object-c or Java, eventually achieve cross-platform display purposes, but temporarily does not support CSS3, Only simple layouts and normal animations can be supported for the time being.

2.Js and Java communication mechanism:

In the Java layer and JS Layer Bridge has the same module configuration table, Java and JS communication, through the configuration table in bridge to the call module method {Moduleid,methodid,args} form passed to the processing layer, The processing layer finds the corresponding method execution through bridge's module configuration table, and if there is callback, it is passed back to the calling layer. After learning about the Reactandroid app launch, the third chapter details this set of mechanisms.

Two. From app launch to page load complete analysis

For the Android React loading process analysis, the following first describes the upper core class and principle, and then comb the core of the enabling steps.
Core Class:
1.ReactInstanceManager: Mainly used to create and manage the upper interface of Catalyst instances, control development debugging, and the life cycle is consistent with the activity of Reactrootview.

2.ReactRootView: To start the portal core class, monitor and distribute events and re-render elements, the app will be the root view of the app when it is launched.

3.CatalystInstance: The top-level asynchronous Jscapi Package class, provides the Java and JS interoperability environment, through the Reactbridge the SVR JS bundle transmits to the JS engine.

4.nativemoduleregistry:java Layer Module registry, which is exposed to the JS API collection.

5.javascriptmoduleregistry:js Layer Module Registry, which is responsible for registering all javascriptmodule to Catalystinstance, via Java dynamic proxy call to JS.

6.CoreModulePackage: Define the core framework module and create the Nativemodules&jsmodules.

Parsing of the startup process:

1. After configuring the Java module and JS module required by the application in Reactinstancemanager, launch the app via Reactrootview Startreactapplication.

2. When creating the Reactinstancemanager, a jsbundlerloader is created to load the Jsbundle and is passed to Catalystinstance.

3.CatalystInstance creates the Java module registry and the JavaScript module registry, and iterates through the instantiation module.

4.CatalystInstance through Jsbundlerloader to the node SVR request JS Bundle, and passed to Jscjavascriptexectutor, finally passed to JavaScriptCore, The rendering is then completed by Reactbridge notification Reactrootview.

Three. js and Java Communication mechanism

The call between Java and JS is that the same module configuration table exists on both sides of the existence, and ultimately all calls are converted to {ModuleID, Methodid,callbackid,args}, and the processing end looks up the registered modules and methods in the module configuration table and invokes them.
Java-Js:java through the registry call to the Catalystinstance instance, through the Reactbridge JNI, Call to CallFunction in Onload.cpp, finally through JavaScriptCore, call Batchedbridge.js, according to the parameters {moduleid,methodid}require corresponding JS module execution. Detailed process such as.

Js-Java:js does not actively pass data to call Java. In the need to call the Java module method, the parameter {Moduleid,methodid} and other data exist in MessageQueue, waiting for the Java event Trigger, and then the MessageQueue in the {ModuleID, Methodid} Back to Java, and then find the appropriate module to handle according to the module registry. Detailed process such as.

Four. Summary

React the UI into components, discarding templates, unifying view logic tags, making the built view easier to extend and maintain, vitual DOM is the highlight of its performance, the DOM in React does not guarantee that immediate impact on the real dom,react will wait until the event loop is over. Using the diff algorithm, compare the current new DOM tree with the previous DOM tree, and calculate the smallest steps to update the real DOM.
The introduction of Android react makes it possible to create native apps for Web,ios and Android platforms with the same core code, but currently Android react's HelloWorld base library will be nearly 7m, and landing projects still need to be streamlined, and we are now streamlining. Of course, there is also a test for the andriod version, which only supports Android 4.1 (API 16) and above (IOS 7.0), and of course, H5 can be used as a fallback if the system does not support the scenario.
We follow up on the dynamics of Android react and continue to push more articles on Android react. (at the bottom of the description of all class libraries for Android react)

On React Native for Android architecture