技术改变生活

Technology changes life,Life-long learning

React Native源代码分析--Android客户端启动流程(从Java到JS)

React Native各个版本间的代码差异不小,现在网上流行的代码解读,基本上都是0.4X或者以前的,虽然从原理上讲大同小异,但是在实现过程中却又不小的变化。本文就以一个基于0.5X版本的官方示例Awesomeproject来看一下它从启动到最终绘制的整个过程。

启动流程

首先,MainApplication创建ReactNativeHost对象
其次,创建MainActivity
由于MainActivity继承于ReactActivity,而ReactActivity的主要功能都是由它的代理ReactActivityDelegate来实现的。所以MainActivity创建过程中的实际的函数调用过程如下:
MainActivity.onCreate->ReactActivity.onCreate->ReactActivityDelegate.onCreate->ReactActivityDelegate.loadApp(mMainComponentName)
其中,loadApp()的参数mMainComponentName来自于MainActivity的getMainComponentName()方法。

从中我们可以看出,loadApp主要作用是:
1).创建ReactRootView:
mReactRootView = createRootView();
2).启动React应用
mReactRootView.startReactApplication
3).将rootView显示到Activity中
getPlainActivity().setContentView(mReactRootView);
下面我们分别说一下这几个步骤:

1.创建ReactRootView:

ReactRootView继承于SizeMonitoringFrameLayout并最终继承于View, 因此在ReactNative应用中,我们实际上创建出来的只是一个view,因此这个ReactRootView可以类似于Activity占据整个页面,也可以和我们使用原生代码写的View一起组合成各种界面。

2.启动React应用

入参

startReactApplication方法中的第一个参数的实际创建过程如下:getReactNativeHost().getReactInstanceManager()->ReactNativeHost
.createReactInstanceManager()->ReactInstanceManagerBuilder.build(),最终会创建一个ReactInstanceManager,他是整个React应用的总管。其中还会通过我们在MainApplication中定义的ReactNativeHost.getPackages() 方法来获取所有的ReactPackage并为将来js模块调用做准备。

代码功能

startReactApplication方法主要目的就是为了在后台线程创建React的上下文ReactContext。实现过程的具体调用关系如下:
startReactApplication->
mReactInstanceManager.createReactContextInBackground()->
recreateReactContextInBackgroundInner()-> recreateReactContextInBackgroundFromBundleLoader()-> recreateReactContextInBackground()-> runCreateReactContextOnNewThread()
在runCreateReactContextOnNewThread主要是两个作用:
1.创建一个新的线程,并在新线程中通过createReactContext创建React的上下文;
2.通过setupReactContext来设置上下文环境,并调用AppRegistry.js启动App
我们逐个分析:

创建React的上下文

1.createReactContext在创建ReactContext过程中主要作用就是创建CatalystInstance实例,它是连接Java、C++和JS的桥梁。我们看一下他的具体调用关系:
createReactContext-> CatalystInstanceImpl.build-> CatalystInstanceImpl.CatalystInstanceImpl
在CatalystInstanceImpl方法中,主要完成以下功能:
1).通过catalystInstanceBuilder来创建CatalystInstance
2).通过catalystInstance.runJSBundle来加载js文件
3).通过reactContext.initializeWithInstance,关联reactContext和CatalystInstance
我们一个个的看:

1). CatalystInstance的创建

我们看一下catalystInstanceBuilder这个方法的参数

入参

a).setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())中首先通过createDefault()创建了线程的配置参数,两个线程的名字分别为native_modules和js,从中我们可以看到这两个线程分别是用来运行native_modules和js的。
b).jsExecutor,是从ReactInstanceManagerBuilder
.build()方法中通过new JSCExecutorFactory(appName, deviceName)传入的,而类JSCExecutor会通过SoLoader.loadLibrary(“jscexecutor”);加载C++库jscexecutor从而生成jsExecutor
c).nativeModuleRegistry,他是一个原生模块的注册表,它是通过如下代码生成的。

我们查看一下processPackages,他实现的主要功能就是将我们所有的原生module的名称和module实例的holder保存到mModules这个HashMap中去,后面会传递给js层,以便js调用原生模块的各种方法。
d).jsBundleLoader是js的加载器,他是在ReactInstanceManagerBuilder.build()函数中通过下面的方法生成的。

我们看他的具体调用JSBundleLoader.createAssetLoader
其中加载器的加载过程如下:
CatalystInstanceImpl.loadScriptFromAssets->CatalystInstanceImpl.jniLoadScriptFromAssets->CatalystInstanceImpl::jniLoadScriptFromAssets->Instance::loadScriptFromString->Instance::loadApplication->NativeToJsBridge::loadApplication->executor->loadApplicationScript
这中间我们就可以看到实际上CatalystInstanceImpl是java层和C++层的中介,它使得java层的方法通过jni调用到C++层,而真正对js进行加载其实是在C++层。
而其中的loadApplicationScript方法会将nativeModuleProxy、nativeFlushQueueImmediate、nativeCallSyncHook三个全局方法注册到JS全局变量中,在js中以后就可以通过global.nativeModuleProxy等方法直接调用C++中的对应方法。

e).exceptionHandler,如果用户没有设置就会默认使用mDevSupportManager来处理各种异常

代码功能

其次,我们看方法的实现,首先它通过ReactQueueConfigurationImpl.create创建了两个线程的配置,然后加上Android的UI线程,一共三个线程的配置共同组合成一个ReactQueueConfigurationImpl返回。然后调用initializeBridge->CatalystInstanceImpl::initializeBridge->Instance::initializeBridge
->NativeToJsBridge::NativeToJsBridge最终创建了原生到js的桥。

2).通过catalystInstance.runJSBundle来加载js文件

js文件的加载过程的调用如下:
catalystInstance.runJSBundle->CatalystInstanceImpl.runJSBundle->instance.loadScriptFromFile->CatalystInstanceImpl.jniLoadScriptFromFile->CatalystInstanceImpl::jniLoadScriptFromFile->Instance::loadScriptFromString->Instance::loadApplication->NativeToJsBridge::loadApplication->JSIExecutor::setBundleRegistry->runtime_->evaluateJavaScript

可以看到从java层一直到了C++层,在C++层通过调用evaluateJavaScript方法,来最终解析js文件。加载的bundle文件应该是index.android.bundle,而这个文件的入口文件就是index.js。因此我们在此就会解析index.js文件。而文件中最终要的功能就是AppRegistry.registerComponent(appName, () => App);也就是将app注册到AppRegistry中。

3).关联reactContext和CatalystInstance

主要实现的就是将CatalystInstance中创建的各个线程的引用和参数的传递到react上下文中。

设置React的上下文并调用AppRegistry.js启动App

ReactInstanceManager.setupReactContext()-> attachRootViewToInstance()-> ReactRootView.runApplication()-> catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName, appParams)

catalystInstance.getJSModule()-> mJSModuleRegistry.getJavaScriptModule

最终会调用JavaScriptModuleRegistry的invoke方法:

mCatalystInstance.callFunction-> function.call()-> catalystInstance.jniCallJSFunction-> CatalystInstanceImpl::jniCallJSFunction->
instance_->callJSFunction-> nativeToJsBridge_->callFunction-> executor->callFunction-> JSIExecutor::callFunction-> callFunctionReturnFlushedQueue_->call

最终会调用MessageQueue.js中的callFunctionReturnFlushedQueue方法

然后就开始调用js侧的启动过程了。下一篇文章详细讲解js侧是如何启动和绘制的。

原文始发于:React Native源代码分析–Android客户端启动流程(从Java到JS)

点赞