I. Architectural design

It is divided into three parts as a whole, Native, JavaScript and Bridge:

Native manages UI updates and interactions, JavaScript invokes Native capabilities for business functions, and Bridge passes messages between the two. That is:

The uppermost layer provides the React class support and runs in the JavaScript runtime environment provided by JavaScriptCore. The Bridge layer connects JavaScript to the Native world. Specifically, Shadow Tree is used to define UI effects and interactive functions. Native Modules provide Native functions (such as Bluetooth), and they communicate with each other through JSON messages

The Bridge layer is the key to React Native technology and has three design features:

  • Asynchronous: does not depend on synchronous communication

  • Serializable: Guarantees that all UI operations can be serialized to JSON and converted back

  • Batched: Queues Native calls and processes them in batches

UI operations are described as a series of instructions, serialized into jSON-formatted messages:

Just as React DOM turns React state updates into imperative, mutative calls to DOM APIs like document.createElement(attrs) and .appendChild(), React Native was designed to return a single JSON message that lists mutations to perform, like [[“createView”, attrs], [“manageChildren”, …]].

It is quite flexible, even with this imperative mechanism it is possible to make JS code run on another JS engine, namely Chrome debugging:

Chrome debugging, which runs all the JavaScript code asynchronously over a WebSocket connection.

Thread model

React Native has three main threads:

  • UI Thread: The main Thread in an Android/iOS (or other platform) application

  • Shadow Thread: The Thread that performs layout calculations and constructs the UI

  • JS Thread: React and other JavaScript code are executed in this Thread

In addition, there is a class of Native Modules threads where different Native Modules can run on different threads (see Threading) :

The interaction between threads is as follows:

The queue in the P.S. diagram refers to the GCD Dispatch queue, which can be understood simply (though incorrectly) as threads

Three. Startup process

In sequence, the React Native runtime environment (i.e. Bridge) is initialized when the App starts up. When the Bridge is ready, JS runs and Native rendering begins:

The complete startup process looks like this:

Where, the upper part is the process of initializing the Bridge:

Divided into four parts (all of which are performed at startup) :

  • Loading JavaScript code: downloaded from the network in development mode, read from device storage in production

  • Initialize Native Modules: Load and instantiate all Native Modules based on the Native Module registration information

  • Inject Native Module information: Take Native Module registration information and inject it into the JS Context as a global variable

  • Initialize the JavaScript engine: JavaScriptCore

After the Bridge is established, the JavaScript code executes to render the user interface and implement business functions

4. Rendering mechanism

The JS thread will transfer View information (structure, style, attribute, etc.) to the Shadow thread to create a Shadow Tree for layout calculation. After the Shadow thread calculates the layout, it will transfer the complete View information (including width, height, location, etc.) to the main thread, which will create Native View accordingly

For user input, the main thread will first package relevant information into event messages and pass them to the Shadow thread, then generate the specified events of the corresponding elements according to the mapping relationship established by the Shadow Tree, and finally pass the events to the JS thread and execute the corresponding JS callback function, that is:

At this point, everything was clear

The resources

  • Part One: React and Codegen

  • Performance

  • React Native Scheduling

  • Bridging in React Native

  • React Native – Fabric review-2018-07-25

  • How React Native constructs app layouts (and how Fabric is about to change it)

  • Optimising React Native: Tools and Tips

  • React Native Under the Hood and its accessories Slides

  • React Native Architecture Overview: and its companion Slides

  • Chain React 2017: Breaking Down Bridging in React Native by Peggy Rayzis: and accompanying Slides, as well as the text edition

It is good to have gained and confused

Follow the “front end back” wechat official account and you will receive a series of “heart original” high-quality technical articles on topics including but not limited to front-end, Node.js and server-side technologies

This article was originally published on ayqy.net. The original link is www.ayqy.net/blog/react-…