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

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

启动流程

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

protected void loadApp(String appKey) {
    if (mReactRootView != null) {
      throw new IllegalStateException("Cannot loadApp while app is already running.");
    }
    //创建ReactRootView:
    mReactRootView = createRootView();
    //启动React应用
    mReactRootView.startReactApplication(
      getReactNativeHost().getReactInstanceManager(),
      appKey,
      getLaunchOptions());
    //将rootView显示到Activity中
    getPlainActivity().setContentView(mReactRootView);
  }

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

1.创建ReactRootView:

               mReactRootView = createRootView()

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

2.启动React应用

mReactRootView.startReactApplication(
        getReactNativeHost().getReactInstanceManager(),
        appKey,
        getLaunchOptions());

入参

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这个方法的参数

CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder().setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())
  .setJSExecutor(jsExecutor)
  .setRegistry(nativeModuleRegistry)
  .setJSBundleLoader(jsBundleLoader)
  .setNativeModuleCallExceptionHandler(exceptionHandler);

入参

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，他是一个原生模块的注册表，它是通过如下代码生成的。

NativeModuleRegistry nativeModuleRegistry = processPackages(reactContext, mPackages, false);

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

JSBundleLoader.createAssetLoader(
    mApplication, mJSBundleAssetUrl, false /*Asynchronous*/)

我们看他的具体调用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++中的对应方法。

  runtime_->global().setProperty(
      *runtime_,
      "nativeModuleProxy",
      Object::createFromHostObject(
          *runtime_, std::make_shared(*this)));

  runtime_->global().setProperty(
      *runtime_,
      "nativeFlushQueueImmediate",
      Function::createFromHostFunction(
          *runtime_,
          PropNameID::forAscii(*runtime_, "nativeFlushQueueImmediate"),
          1,
          [this](
              jsi::Runtime&,
              const jsi::Value&,
              const jsi::Value* args,
              size_t count) {
            if (count != 1) {
              throw std::invalid_argument(
                  "nativeFlushQueueImmediate arg count must be 1");
            }
            callNativeModules(args[0], false);
            return Value::undefined();
          }));

  runtime_->global().setProperty(
      *runtime_,
      "nativeCallSyncHook",
      Function::createFromHostFunction(
          *runtime_,
          PropNameID::forAscii(*runtime_, "nativeCallSyncHook"),
          1,
          [this](
              jsi::Runtime&,
              const jsi::Value&,
              const jsi::Value* args,
              size_t count) { return nativeCallSyncHook(args, count); }));

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

JavaScriptModule interfaceProxy = (JavaScriptModule) Proxy.newProxyInstance(
        moduleInterface.getClassLoader(),
        new Class[]{moduleInterface},
        new JavaScriptModuleInvocationHandler(instance, moduleInterface));
    mModuleInstances.put(moduleInterface, interfaceProxy);

最终会调用JavaScriptModuleRegistry的invoke方法：

@Override
    public @Nullable Object invoke(Object proxy, Method method, @Nullable Object[] args) throws Throwable {
      NativeArray jsArgs = args != null
        ? Arguments.fromJavaArgs(args)
        : new WritableNativeArray();
      mCatalystInstance.callFunction(getJSModuleName(), method.getName(), jsArgs);
      return null;
    }

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

callFunctionReturnFlushedQueue_ = batchedBridge.getPropertyAsFunction(
        *runtime_, "callFunctionReturnFlushedQueue");

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

callFunctionReturnFlushedQueue(module: string, method: string, args: any[]) {
    this.__guard(() => {
      this.__callFunction(module, method, args);
    });

    return this.flushedQueue();
  }

 __callFunction(module: string, method: string, args: any[]): any {
    this._lastFlush = Date.now();
    this._eventLoopStartTime = this._lastFlush;
    if (__DEV__ || this.__spy) {
      Systrace.beginEvent(`${module}.${method}(${stringifySafe(args)})`);
    } else {
      Systrace.beginEvent(`${module}.${method}(...)`);
    }
    if (this.__spy) {
      this.__spy({type: TO_JS, module, method, args});
    }
//从JS层的已经通过registerComponent注册的模块中查找到AppRegistry.js
    const moduleMethods = this.getCallableModule(module);
    invariant(
      !!moduleMethods,
      'Module %s is not a registered callable module (calling %s)',
      module,
      method,
    );
    invariant(
      !!moduleMethods[method],
      'Method %s does not exist on module %s',
      method,
      module,
    );
 //取到Java层调用的JS层方法，执行AppRegistry.js的runApplication()方法
    const result = moduleMethods[method].apply(moduleMethods, args);
    Systrace.endEvent();
    return result;
  }

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