Shulou(Shulou.com)06/02 Report--

This article will explain in detail the example analysis of React Native For Android architecture for everyone. The content of the article is of high quality, so Xiaobian shares it with you as a reference. I hope you have a certain understanding of relevant knowledge after reading this article.

Facebook released React Native for Android on September 15, 2015, extending JavaScript development technology to the Android platform. React Native lets developers write apps using JavaScript and React, using the same core code to create native apps for Web, iOS and Android platforms. Here is an overview of Android React architecture and related basics.

1.React Architecture Analysis 1. Hierarchy:

Java layer: java layer is the logical entrance, start the javascript parser of C++ layer, execute the rendering instructions passed by js through c++, and thus construct NativeUI. Java layer relies on many excellent open source libraries, Fresco is used in image processing, okhttp is used in network communication, and of course there are many tool classes, such as Json parsing tool jackson, Animation well-known open source library NineOldAndroids, small and complete underlying tool classes bolts, etc., encapsulated as Module in java layer. Java layer core jar package is react-native.jar, encapsulating a number of upper interfaces, such as Module, Registry, bridge, etc., the following will be the App activation process, a complete analysis of the java layer architecture.

C++ layer: C++ layer is mainly encapsulated JavaScriptCore, the implementation of the analysis of js. Based on JavaScriptCore, Web developers can take full advantage of ES6's new features, such as classes, arrow operators, etc., and React Native runs in JavaScriptCore with no browser compatibility at all. Bridge bridges the core interface for Java JS communication. JSLoader mainly loads local files from assets directory into javascriptCore, and then parses js files through JSC Extractor.

Js layer: mainly deals with event distribution and UI Layout, mainly including the following components:

Component: Js layer uses Virtual DOM written by js/jsx to construct Component or Module. Virtual DOM is a lightweight expression of DOM in memory, which can generate UI under different platforms through different rendering engines. The use of components is extremely important in React, because the presence of components makes computing DOM diff more efficient.

Lifecycle&Data: React components control lifecycle and event callbacks through internal state variables. For example, getInitialState method is used to define the initial state of a component, and subsequent components can read this state through this.state attribute. When an event triggers (or actively calls the setState method to update data) causing a state change, the this.setState method modifies the state value, and after each modification, the this.render method is automatically called to rerender the component.

Layout: React uses css-layout, css-layout uses javascript to implement flexbox, does not depend on DOM, can be compiled into Object-C or Java, and finally achieve cross-platform display purposes, but temporarily does not support css3, temporarily only support simple layout and ordinary animation.

Js and Java communication mechanisms:

When Java and JS communicate with each other, the configuration table in the bridge converts the called module method into the form of {moduleID,methodID,args} and passes it to the processing layer. The processing layer finds the corresponding method to execute through the module configuration table of the bridge. If there is a callback, it returns it to the calling layer. After understanding the launch of the ReactAndroid APP, the third part will talk about this mechanism in detail.

II. From app launch to page load complete analysis

The above figure is an analysis of the Android React loading process. The following outlines the upper core classes and principles, and then combs the core enabling steps.

Core Class：

1. ReactInstanceManager: It is mainly used to create and manage the upper interface of Catalyst instance, control development and debugging, and keep the life cycle consistent with the activity where ReactRootView is located.

2. ReactRootView: It is the core class of the startup entry, responsible for listening and distributing events and rerendering elements. After the App is started, it will serve as the root view of the app.

CatalystInstance: A top-level asynchronous JSCAPI wrapper class that provides an environment for Java and JS interoperability, and transmits the Js Bundle of Svr to the JS engine through ReactBridge.

Native Module Registry: Java Layer Module Registry, i.e. the collection of APIs exposed to Js.

JavascriptModuleRegistry: Js layer module registry, responsible for registering all JavaScriptModules to CatalystInstance, called to Js through Java dynamic proxy.

Core Module Package: Define core framework modules and create Native Modules &JsModules.

Analysis of the start-up process:

1. After configuring java modules and js modules required by the application in ReactInstanceManager, launch the APP via startReactApplication in ReactRootView.

2. JSBundlerLoader for loading JsBundle is created at the same time as ReactInstanceManager and passed to CatalystInstance.

CatalystInstance creates Java module registry and Javascript module registry and iterates through instantiated modules.

4. CatalystInstance requests Js Bundle from Node Svr through JSBundlerLoader, and passes it to JSC JavaScriptExtractor, and finally to javascriptCore, and then notifies ReactRootView to complete rendering through ReactBridge.

3.Js and Java Communication Mechanism

The call between Java and JS is based on the existence of the same module configuration table on both sides. Finally, the call is converted into {moduleID, methodID, callbackID, args}. The processing end searches for the registered module and method in the module configuration table and calls it.

Java -> Js ： Java calls CatalystInstance instance through registry, calls callFunction in Onload.cpp through jni of ReactBridge, finally calls BatchedBridge.js through javascriptCore, and executes according to parameter {moduleID,methodID}require corresponding Js module. The detailed process is shown below.

JS -> Java: JS does not actively pass data to call Java. When calling Java module method, parameters {moduleID,methodID} and other data will be stored in MessageQueue, waiting for Java event trigger, then {moduleID,methodID} in MessageQueue will be returned to Java, and then corresponding module will be found according to module registry for processing.

React decomposes UI into components, discards templates, unifies view logic labels, makes it easier to expand and maintain the built view, and the Virtual DOM is the highlight of its performance improvement. The DOM in React does not guarantee that it will affect the real DOM immediately. React will wait until the end of the event cycle. Using diff algorithm, compare the current new DOM tree with the previous DOM tree and calculate the smallest step to update the real DOM.

The launch of Android React makes it possible to create native apps for Web, iOS and Android platforms using the same core code, but at present Android React's HelloWorld base library is nearly 7m, and the landing project still needs to be streamlined. Of course, there is also a test for the Android version, which only supports Android 4.1 (API 16) and above (iOS 7.0). Of course, if the system does not support it, H5 can be used as a backup solution.

The sample analysis of React Native For Android architecture is shared here. I hope the above content can be helpful to everyone and learn more. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.