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

This article shows you how React Native For Android architecture from QQ team is, the content is concise and easy to understand, definitely can make you shine, through the detailed introduction of this article I hope you can gain something.

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.

2) Js and Java communication mechanism:

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: *** Asynchronous JSCAPI encapsulation class, providing Java and JS interoperability environment, through the ReactBridge will be Svr Js Bundle transmitted to the JS engine.

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, *** passes it 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, 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. The detailed process is shown below.

IV. summary

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.

We will continue to pay attention to Android React's developments in the future and continue to push more articles about Android React to everyone. (There is a description of all Android React libraries at the bottom)

The above content is from QQ team React Native For Android architecture is what, you learned knowledge or skills? If you want to learn more skills or enrich your knowledge reserves, please pay attention to the industry information channel.

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.