React Native之底层源码分析篇

学习React-Native有1段时间了。今天就从源码的角度来分析下React-Native底层的通讯机制。了解下底层是如何通讯的对开发也有所好处。

概要

先大概讲1下React-Native的通讯进程。RN主要的通讯在于java与js之间，平常我们写的jsx代码终究会调用到原生的View。上1篇博客我们也了解到了要新建1个原生模块需要在java层和js层分别写1个Module，那这彼此之间联系是如何实现的呢？

层次结构

RN总共分为3层，java层，C++层，js层。借用1幅图来看下：

Java层：java层就是app原生代码，它通过启动C++层的javascript解析器javascriptCore来履行js代码，从而构建原生UI等。java层依赖于众多优秀开源库，在图片处理使用的是Fresco，网络通讯使用的是okhttp，Json解析工具用jackson,动画库用NineOldAndroids等，在java层原生的功能均封装为Module，如Toast和Log等。
C++层：c++层最主要是封装了JavaScriptCore，它是1个全新的支持ES6的webKit。Bridge连接了java与js之间的通讯。解析js文件是通过JSCExectutor进行的。
Js层：主要处理事件分发及UI Layout，平常开发最经常使用的。通用jsx来写业务代码，通过flexbox来实现布局。不依赖DOM。由于react有 DOM diff这个算法，所以它的效力非常高。

通讯机制

在Java层与Js层的bridge分别存有相同1份模块配置表，Java与Js相互通讯时，通过将里配置表中的moduleID，methodID转换成json数据的情势传递给到C++层，C++层传送到js层，通过js层的的模块配置表找到对应的方法进行履行，如果有callback，则回传给java层。这里只是大概介绍，后面会有详细讲授。

主要流程与主要类

先看下java层的流程图：

• ReactInstanceManager：主要是用来创建及管理CatalyInstance的实例的上层接口，控制开发调试，生命周期与ReactRootView所在activity保持1致。
• ReactRootView：为启动入口核心类，负责监听及分发事件并重新渲染元素，App启动后，其将作为App的root view。
• CatalystInstance：提供Java与Js互通的环境，创建Java模块注册表及Javascript模块注册表，并遍历实例化模块，最后通过ReactBridge将Js Bundle传送到Js引擎。
• JSBuilderLoader:缓存了JsBundle的信息，封装了上层加载JsBundle相干接口，CatalystInstance通过其间接调用ReactBridge去加载文件。
• NativeModuleRegistry：Java层模块注册表，即暴露给Js的API集合。
• JavascriptModuleRegistry：Js层模块注册表，负责将所有JavaScriptModule注册到CatalystInstance。
• CoreModulePackage：CoreModulesPackage里面定义了RN框架核心的1些Java和JS的module，创建NativeModules&JsModules组件模块。

源码分析

加载Module

首先看MainActivity的

AppReactPackage是我们自定义的1个ReactPackage，也就是说如果自己定义了新组件，要在这里添加。看下ReactActivity，看它的onCreate方法：

主要完成3个功能，通过createReactInstanceManager创建ReactInstanceManager,它主要是用来创建及管理CatalyInstance的实例的上层接口。第2步是通过createRootView来创建ReactRootView。最后调用ReactRootView的startReactApplication来启动利用，并把它当作rootview setContentView到界面上。重点看startReactApplication方法：

mJSModuleName是与前端约定好所要启动的JS Application Name。先看createReactContextInBackground方法，它位于ReactInstanceManager的实现类ReactInstanceManagerImpl中：

createReactContextInBackground终究调用到recreateReactContextInBackgroundInner：

接着调用recreateReactContextInBackgroundFromBundleFile：

经过1系列的周转，最后调用到了recreateReactContextInBackground：

上面代码通过ReactContextInitAsyncTask这个AsyncTask来初始化ReactCotext。

ReactContextInitAsyncTask为创建ReactContext的核心类，随后，调用createReactContext进1步创建ReactContext。在创建完React Context后会调用setUpReactContext，将ReactRootView做为Root View传递给UIManagerModule，调用AppRegistry的runApplication去启动Js Application等。看createReactContext的代码：

代码很长，我们来分段分析。

第1步

创建JavaScriptModulesConfig。

第2步

创建ReactApplicationContext上下文。

第3步

创建ReactPackage。ReactPackage主要通过createNativeModules、createJSModules和createViewManagers等API去创建本地模块，JS模块及视图组件等。ReactPackage分为framework的CoreModulesPackage和业务方可选的基础MainReactPackage，CoreModulesPackage封装了大部份通讯，调试核心类，如UIManagerModule，这个负责控制Js层Dom到Native View的核心类；看下processPackage方法：

很简单，拿到具体的native和JS的module把它们添加到对应的builder中。先是添加CoreModulesPackage中的module再添加我们自定义的module，先看CoreModulesPackage中的createNativeModules方法：

就是将UIManagerModule、AnimationsDebugModule等装到build中。
接着添加我们自定义的组件，以自定义Log为例，需要以下内容吗：

很简单，装到自定义的List中。

第4步

创建CatalystInstance。CatalystInstance其实不直接面向开发者，开发者通ReactInstanceManger间接操作CatalystInstance。CatalystInstance持有对ReactBridge的援用，主要通过ReactBridge这个JNI类去实现Java层与Js层的通讯，ReactBridge由CatalystInstance的Constructor创建。同时初始化的时候调用了ReactQueueConfigurationSpec.createDefault创建了ReactNative通讯的两个线程 JsQueueThread&NativeModulesQueueThread；
在这里ReactBridge由CatalystInstance的Constructor创建。看下它的构造函数：

注意到这行代码：

这里通过jsModulesConfig（封装了module）创建了JSModuleRegistry。好了js注册表终究创建成功了。这里有两个问题，native注册表在哪创建呢，还有就是注册表甚么时候传给js层呢。先留着这两个问题。
接下来看下initializeBridge方法：

ReactBridge将注册表信息存入与前端互通的全局变量 __fbBatchedBridgeConfig 中，使得Js层与Java层存在一样的模块注册表。bridge.setGlobalVariable是1个native函数。让我们猜1下下它的功能，就是用jsModulesConfig这个参数在js层中生成模块注册表，先看1下参数 buildModulesConfigJSONProperty的代码：

看到JsonWriter就知道是把NativeModuleRegistry 和JavaScriptModulesConfig 转换成Json字符串，其中remoteModuleConfig指NativeModuleRegistry 信息，localModulesConfig指JavaScriptModulesConfig 信息。看下JavaScriptModulesConfig 的writeModuleDescriptions方法：

看下appendJSModuleToJSONObject方法：

从上代码可知生成的json字符串包括moduleID和methodID信息。NativeModuleRegistry 也同理，我们大概看下它的代码：

接下来我们要找到setGlobalVariable的Native层代码，C++层代码我不太懂，这里参考了下他人的分析进程。大概进程是这样，首先入口是OnLoad.cpp。在其中找到以下代码：

都是塞进runOnExecutorQueue履行队列里面等待调用，最后回调到JSExecutor，而JSExecutor的实现类是JSCExecutor，最后来看看它的setGlobalVariable方法。

懂个大概吧，参数propName是从Java层传递过来的，相当于java代码中的__fbBatchedBridgeConfig和__RCTProfileIsProfiling。jsPropertyName方法就是buildModulesConfigJSONProperty封装好的对象。JSContextGetGlobalObject是WeiKit的方法，接下来会调用到js层的MessageQueue中：

生成两个映照表，从上面的代码我们己经分析过了，remoteModuleConfig是NativeModuleRegisty映照表内容。localModulesConfig则是JavaScriptModule内容。
到这里，js就生成了两张映照表了，这样java层和js层就都存在一样的映照表，相互通讯就是通过它来实现。扯远了，回到createReactView。

第5步

调用catalystInstance.runJSBundle加载解析Jsbundle。
回到createReactView方法，看catalystInstance.runJSBundle：

调用catalystInstance.runJSBundle加载解析Jsbundle。假设在解析进程中出现Exception，统1交给NativeModuleCallExceptionHandler处理。
在创建完React Context后会履行ReactContextInitAsyncTask的onPostExecute。来看下onPostExecute的代码：

这里主要实现两个功能，第1，调用catalystInstance.initialize()来创建NativeModuleRegistry,好啦，回答了1个问题了哈。

第2，调用attachMeasuredRootView方法。将ReactRootView做为Root View传递给UIManagerModule，尔后Js通过UIManager创建的View都会add到该View上。以下：

再来看下attachMeasuredRootViewToInstance这个方法：

private void attachMeasuredRootViewToInstance(ReactRootView rootView , C

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠