ReactNative source code: source code

About the author

Guo Xiaoxing, programmer and guitarist, is mainly engaged in the infrastructure of Android platform. Welcome to exchange technical questions. You can go to my Github to raise an issue or send an email to [email protected] to communicate with me.

More articles: github.com/guoxiaoxing…

This series of articles mainly analyze the source code of ReactNative, and analyze the startup process, rendering principle, communication mechanism and thread model of ReactNative.

1ReactNative source code: source code
2ReactNative source code: code call
3ReactNative source code: startup process
4ReactNative source code: rendering principle
5ReactNative source code: thread model
6ReactNative source code: communication mechanism

Source code address: github.com/facebook/re…

Source code version:

This is the first article of ReactNative Source code. At the beginning, we will not do an in-depth analysis of the source code. We will first have a general impression of the source code structure and ReactNative framework, which leads to two questions to be discussed in this article:

1. What is the framework of the ReactNative system? 2. Where are the main lines of ReactNative system framework, what are the branch lines, and how to analyze these lines?Copy the code

Ok, let’s start with the first question.

ReactNative system framework overview

ReactNative source code structure diagram

-Jni: Many of the mechanics of ReactNative are implemented in C and C++, this part is used to load the SO library. - PerfTest: test configuration - ProGuard: confusion - Quicklog:logOutput - React: ReactNative is the main content of the source code, and the main content of our analysis. -Systrace: System Trace-yoga: Yoga? No, it's facebook's open source front-end layout engineCopy the code

React relies on several other packages, and their call relationships are shown below:

The ReactNative system framework is shown below:

JavaScriptCore is the core part of JAVASCRIPT parsing. IOS uses built-in JavaScriptCore, while Androis uses webkit.org/ jsc.so.

ReactNative source line and branch

From the above analysis of ReactNative system framework, we can easily see that the main line of source code lies in the startup process of ReactNative, the drawing and rendering of UI and bilateral communication (Java calls JS, JS calls Java).

Source line:

1 ReactNative application startup process 2 ReactNative APPLICATION UI drawing and rendering 3 ReactNative application communication mechanism 3 ReactNative application thread modelCopy the code

Source code:

1 ReactNative runtime exceptions and exception capture and processing. SOLoader loading dynamic link library 3 ReactNative touch event handling mechanismCopy the code

Above is the whole source line and branch line, understand the general process. Let’s take a look at some of the important concepts that will be used in subsequent source code analysis.

Three important concepts of ReactNative source code

3.1 ReactContext

ReactContext inherits from ContextWrapper, which is the context of the ReactNative application, and is obtained by getContext(), which accesses the implementation of the ReactNative core class.

One of the most important instances of the startup process is ReactContext, and before we introduce the startup process, let’s take a look at the concept of ReactContext.

ReactContext inherits from ContextWrapper, meaning that it is the same concept as Android Context, the Context of the entire application. So what is the context? We know that the Android application model is based on the application design mode of components. The operation of components requires a complete running environment, which is the context of the application.

The above concept may be a bit abstract, but let’s illustrate it with an example.

Each interaction between the user and the operating system is a scenario, for example: Activities with programs, such as making phone calls and sending text messages, and services without programs, such as music playing in the background, are abstracted into Context. It represents an environment in which the current object is re-applied and a process of interaction with the system.

ReactContext ReactContext ReactContext ReactContext ReactContext

ReactContext: ContextWrapper: ContextWrapper: ContextWrapper: ContextWrapper: ContextWrapper: ContextWrapper: ContextWrapper: ContextWrapper

ReactApplicationContext: Inherits from ReactContext, the Wrapper class of ReactContext, just like Context and ContextWrapper. ThemedReactContext: inherits from ReactContext and is the Wrapper class of ReactContext.Copy the code

3.2 ReactInstanceManager

ReactInstanceManager is the total management class of ReactNative applications, creating ReactContext, CatalystInstance and other classes, parsing ReactPackage to generate mapping tables, And with ReactRootView management View creation and life cycle functions.

3.3 CatalystInstance

CatalystInstance is the general communication management class of Java layer, C++ layer and JS layer of ReactNative application. It manages the mapping table and callback of core Module of Java layer and JS layer, and serves as the entrance and bridge of three-terminal communication.

3.4 NativeToJsBridge/JsToNativeBridge

NativeToJsBridge is a bridge for Java to invoke JS, which is used to invoke JS Modules and call back Java.

JsToNativeBridge is a bridge between JS and Java to invoke Java Modules.

3.5 JavaScriptModule/NativeModule

JavaScriptModule is a JavaScriptModule, which is responsible for the format declaration of js-java mapping calls. It is centrally managed by CatalystInstance.

NativeModule is an Ava Module. It is responsible for declaring the Java to Js mapping format. NativeModule is managed by CatalystInstance.

JavaScriptModule: A collection of apis that JS exposes to Java calls, such as AppRegistry and DeviceEventEmitter. You can inherit the JavaScriptModule interface to define a custom interface module and declare methods corresponding to JS.

NativeModule/UIManagerModule: NativeModule is a set of Java exposed to JS calls the APU, such as: ToastModule, DialogModule, UIManagerModule, etc. UIManagerModule is also a set of APIS called by JS, which is used to create a View. Business libraries can customize modules by implementing NativeModule, exposing the module name to the JS layer via getName() and the API to the JS layer via the @reactMethod annotation.