ReactNative For Android 框架启动核心路径剖析

版权声明：本文由王少鸣原创文章，转载请注明出处: 
文章原文链接：https://www.qcloud.com/community/article/144

来源：腾云阁 https://www.qcloud.com/community

前面给大家分析过 ReactNative For Android (RN4A) 的通信机制，这次我们从源码出发，分析下RN4A的启动过程。启动过程基于通信机制，涉及通信机制原理大家可以查看前一篇文章，本篇不赘述。


上面是2016 React.js Conf FB 工程师分享的RN启动时序图，整个过程比较清晰，先启动终端运行时，随后由终端上下文去启动JS的运行时，进而布局，最后再由终端进行渲染，最后将View添加到RootView上。那接下来，我们先理解几个概念，方便后续我们对整个启动过程的理解。

模块：

模块即暴露给调用方的API集合，在RN4A存在两种模块。

一种是Native层暴露给Js层的API集合模块，即NativeModule，如ToastModule,DialogModule,或是创建View的UIManagerModule。业务方可以通过实现NativeModule自定义模块，通过重写getName将模块名暴露给Js层，通过注解的方式将API暴露给Js层调用。

另一种是Js层暴露给Java层的API集合模块，即JavascriptModule，如DeviceEventEmitter,AppRegistry等。业务方可以通过继承JavaScriptModule接口自定义接口模块，申明与Js层相应的方法即可。

无论是NativeModule还是JavascriptModule，在Js层存在与之相互映射同名的Module，Js层通过require引用Module。

模块注册表：

各模块信息统一收集到模块注册表。同样，在RN4A中存在两种模块注册表，一是由集合所有Java层模块接口信息的NativeModuleRegistry，另一种是集合所有Js层模块接口信息的JavascriptModuleRegistry。在启动RN4A后，终端将注册表信息存入与前端互通的全局变量__fbBatchedBridgeConfig 中，使得Js层与Java层存在同样的模块注册表。

正如上面FB攻城狮提出的时序图，从终端启动，入口是ReactRootView.startReactApplication，在构造JavaScriptExecutor&JSBundleLoader后，进而通过ReactContextInitAsycnTask去创建ReactContext，这部分主要创建了NativeModules,JavaScriptModule及其对的注册表，负责Js与Java通信的高层接口CatalystInstance等。在创建完ReactContext后，通过CatalystInstance获取AppRegistry并调用其runApplication启动Js Application。整体流程如下：

接下来进入正题，从源码来分析RN4A的启动（为阅读方便，源码适当裁剪）

ReactInstanceManager createReactContextInBackground，通过AysncTask初始化ReactNative上下文。mJSModuleName是与前端约定好所要启动的JS Application Name。mLauncahOptions是终端启动前端Application可选的传入的参数。

/**
 * ReactRootView.java
 */
public void startReactApplication(
    ReactInstanceManager reactInstanceManager,
    String moduleName,
    @Nullable Bundle launchOptions) {
  UiThreadUtil.assertOnUiThread();

  mReactInstanceManager = reactInstanceManager;
  mJSModuleName = moduleName;
  mLaunchOptions = launchOptions;

  if (!mReactInstanceManager.hasStartedCreatingInitialContext()) {
    mReactInstanceManager.createReactContextInBackground();
  }

  if (mWasMeasured && mIsAttachedToWindow) {
    mReactInstanceManager.attachMeasuredRootView(this);
    mIsAttachedToInstance = true;
    getViewTreeObserver().addOnGlobalLayoutListener(getKeyboardListener());
  } else {
    mAttachScheduled = true;
  }
}
`

createReactContextInBackground最终调用到recreateReactContextInBackgroundFromBundleFile。这里会创建两个Key Obj : JSCJavaScriptExecutor&JSBundleLoader。
JSCJavaScriptExecutor继承自JavaScriptExecutor，在JSCJavaScriptExecutor.class加载会加载ReactNative的SO，并且，在初始JSCJavaScriptExecutor时会调用initialze去初始C++层ReactNative与JSC的通信框架等。
JSBundleLoader缓存了JsBundle的信息，封装了上层加载JsBundle相关接口，CatalystInstance通过其间接调用ReactBridge去加载文件。

/**
 * ReactInstanceManagerImpl.java
 */
private void recreateReactContextInBackgroundFromBundleFile() {
  recreateReactContextInBackground(
      new JSCJavaScriptExecutor.Factory(),
      JSBundleLoader.createFileLoader(mApplicationContext, mJSBundleFile));
}

创建完JSCJavaScriptExecutor&JSBundleLoader后，execute ReactContextInitAsyncTask继续初始化ReactContext。

/**
 * ReactInstanceManagerImpl.java
 */
private void recreateReactContextInBackground(
    JavaScriptExecutor.Factory jsExecutorFactory,
    JSBundleLoader jsBundleLoader) {

  ReactContextInitParams initParams =
      new ReactContextInitParams(jsExecutorFactory, jsBundleLoader);
  if (!mIsContextInitAsyncTaskRunning) {

    ReactContextInitAsyncTask initTask = new ReactContextInitAsyncTask();
    initTask.execute(initParams);
    mIsContextInitAsyncTaskRunning = true;
  } else {
    mPendingReactContextInitParams = initParams;
  }
}

ReactContextInitAsyncTask为创建ReactContext的核心类，在执行初始化前会销毁先前的上下文，保证只存在一个上下文。随后，调用createReactContext进一步创建ReactContext。在创建完React Context后会调用setUpReactContext，进而通知DevSupportManager更新上下文，更新生命周期，将ReactRootView做为Root View传递给UIManagerModule，调用AppRegistry的runApplication去启动Js Application等。

/**
 * ReactInstanceManagerImpl$ReactContextInitAsynTask.java
 */
private final class ReactContextInitAsyncTask extends
    AsyncTask<ReactContextInitParams, Void, Result<ReactApplicationContext>> {
  @Override
  protected void onPreExecute() {
    if (mCurrentReactContext != null) {
      tearDownReactContext(mCurrentReactContext);
      mCurrentReactContext = null;
    }
  }

  @Override
  protected Result<ReactApplicationContext> doInBackground(ReactContextInitParams... params) {
    Assertions.assertCondition(params != null && params.length > 0 && params[0] != null);
    try {
      JavaScriptExecutor jsExecutor = params[0].getJsExecutorFactory().create();
      return Result.of(createReactContext(jsExecutor, params[0].getJsBundleLoader()));
    } catch (Exception e) {
      // Pass exception to onPostExecute() so it can be handled on the main thread
      return Result.of(e);
    }
  }

  @Override
  protected void onPostExecute(Result<ReactApplicationContext> result) {
    try {
      setupReactContext(result.get());
    } catch (Exception e) {
      mDevSupportManager.handleException(e);
    } finally {
      mIsContextInitAsyncTaskRunning = false;
    }

    // Handle enqueued request to re-initialize react context.
    if (mPendingReactContextInitParams != null) {
      recreateReactContextInBackground(
          mPendingReactContextInitParams.getJsExecutorFactory(),
          mPendingReactContextInitParams.getJsBundleLoader());
      mPendingReactContextInitParams = null;
    }
  }
}

在CreateReactContext中，主要有以下5个key path:

  1. 通过Builder构建上文概念讲过的NativeModuleRegistry及JavaScriptModuleConfig；
  2. 创建ReactApplicationContext。ReactApplicationContext继承自ContextWrapper，主要缓存了Application Context，Activity Context，ReactNative处理消息的三个thread(下篇讲述)，还有就是全局控制JS调用导致Native Module Crash的NativeModuleCallExceptionHandler，在初始化ReactInstanceManager的时候传入，并且要关闭DeveloperSupport后才可以启用，假如不传，则默认交由DevSupportManger去处理；
  3. 创建ReactPackage。ReactPackage主要通过createNativeModules、createJSModules和createViewManagers等API去创建本地模块，JS模块及视图组件等。ReactPackage分为framework的CoreModulesPackage和业务方可选的基础MainReactPackage，CoreModulesPackage封装了大部分通信，调试核心类，如UIManagerModule，这个负责控制Js层Dom到Native View的核心类；
  4. 创建CatalystInstance。CatalystInstance并不直接面向开发者，开发者通ReactInstanceManger间接操作CatalystInstance。CatalystInstance持有对ReactBridge的引用，主要通过ReactBridge这个JNI类去实现Java层与Js层的通信，ReactBridge由CatalystInstance的Constructor创建。同时初始化的时候调用了ReactQueueConfigurationSpec.createDefault创建了ReactNative通信的两个线程 JsQueueThread&NativeModulesQueueThread；
  5. 调用reactContext.initializeWithInstance进一步将创建完的CatalystInstance及线程等缓存在ReactContext中；
  6. 调用catalystInstance.runJSBundle加载解析Jsbundle；
/**
 * ReactInstanceManagerImpl.java
 *
 * @return instance of {@link ReactContext} configured a {@link CatalystInstance} set
 */
private ReactApplicationContext createReactContext(
    JavaScriptExecutor jsExecutor,
    JSBundleLoader jsBundleLoader) {

  mSourceUrl = jsBundleLoader.getSourceUrl();
  NativeModuleRegistry.Builder nativeRegistryBuilder = new NativeModuleRegistry.Builder();
  JavaScriptModulesConfig.Builder jsModulesBuilder = new JavaScriptModulesConfig.Builder();

  ReactApplicationContext reactContext = new ReactApplicationContext(mApplicationContext);
  if (mUseDeveloperSupport) {
    reactContext.setNativeModuleCallExceptionHandler(mDevSupportManager);
  }

  CoreModulesPackage coreModulesPackage =
        new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider);
  processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);

  for (ReactPackage reactPackage : mPackages) {
      processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
  }

  nativeModuleRegistry = nativeRegistryBuilder.build();
  javaScriptModulesConfig = jsModulesBuilder.build();

  NativeModuleCallExceptionHandler exceptionHandler = mNativeModuleCallExceptionHandler != null
      ? mNativeModuleCallExceptionHandler
      : mDevSupportManager;
  CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder()
      .setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())
      .setJSExecutor(jsExecutor)
      .setRegistry(nativeModuleRegistry)
      .setJSModulesConfig(javaScriptModulesConfig)
      .setJSBundleLoader(jsBundleLoader)
      .setNativeModuleCallExceptionHandler(exceptionHandler);

  CatalystInstance catalystInstance= catalystInstanceBuilder.build();
  if (mBridgeIdleDebugListener != null) {
    catalystInstance.addBridgeIdleDebugListener(mBridgeIdleDebugListener);
  }
  reactContext.initializeWithInstance(catalystInstance);
  catalystInstance.runJSBundle();

  return reactContext;
}

ReactBridge由CatalystInstance的Constructor创建。

/**
 *  CatalystInstanceImpl.java
 */
private CatalystInstanceImpl(
    final ReactQueueConfigurationSpec ReactQueueConfigurationSpec,
    final JavaScriptExecutor jsExecutor,
    final NativeModuleRegistry registry,
    final JavaScriptModulesConfig jsModulesConfig,
    final JSBundleLoader jsBundleLoader,
    NativeModuleCallExceptionHandler nativeModuleCallExceptionHandler) {
  mReactQueueConfiguration = ReactQueueConfigurationImpl.create(
      ReactQueueConfigurationSpec,
      new NativeExceptionHandler());
  mBridgeIdleListeners = new CopyOnWriteArrayList<>();
  mJavaRegistry = registry;
  mJSModuleRegistry = new JavaScriptModuleRegistry(CatalystInstanceImpl.this, jsModulesConfig);
  mJSBundleLoader = jsBundleLoader;
  mNativeModuleCallExceptionHandler = nativeModuleCallExceptionHandler;
  mTraceListener = new JSProfilerTraceListener();

  try {
    mBridge = mReactQueueConfiguration.getJSQueueThread().callOnQueue(
        new Callable<ReactBridge>() {
          @Override
          public ReactBridge call() throws Exception {
            Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "initializeBridge");
            try {
              return initializeBridge(jsExecutor, jsModulesConfig);
            } finally {
              Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
            }
          }
        }).get();
  } catch (Exception t) {
    throw new RuntimeException("Failed to initialize bridge", t);
  }
}

ReactBridge将注册表信息存入与前端互通的全局变量 __fbBatchedBridgeConfig 中，使得Js层与Java层存在同样的模块注册表。

/**
 *  CatalystInstanceImpl.java
 */
private ReactBridge initializeBridge(
    JavaScriptExecutor jsExecutor,
    JavaScriptModulesConfig jsModulesConfig) {

  ReactBridge bridge = new ReactBridge(jsExecutor, new NativeModulesReactCallback(),
      mReactQueueConfiguration.getNativeModulesQueueThread());

  Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "setBatchedBridgeConfig");
  bridge.setGlobalVariable(
      "__fbBatchedBridgeConfig",
      buildModulesConfigJSONProperty(mJavaRegistry, jsModulesConfig));
  bridge.setGlobalVariable(
      "__RCTProfileIsProfiling",

  return bridge;
}

调用catalystInstance.runJSBundle加载解析Jsbundle。假如在解析过程中出现Exception，统一交给NativeModuleCallExceptionHandler处理，建议开发者设置自己的NativeModuleCallExceptionHandler，可以归避部分Crash（SyntaxError: Unexpected token ‘<‘ 或 SyntaxError: Unexpected end of script）。

/**
 *  CatalystInstanceImpl.java
 */
public void runJSBundle() {
  try {
    mJSBundleHasLoaded = mReactQueueConfiguration.getJSQueueThread().callOnQueue(
        new Callable<Boolean>() {
          @Override
          public Boolean call() throws Exception {
            incrementPendingJSCalls();
            try {
              mJSBundleLoader.loadScript(mBridge);
              Systrace.registerListener(mTraceListener);
            } catch (JSExecutionException e) {
              mNativeModuleCallExceptionHandler.handleException(e);
            } finally {
              Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
            }
            return true;
          }
        }).get();
  } catch (Exception t) {
    throw new RuntimeException(t);
  }
}

在创建完React Context后会执行ReactContextInitAsyncTask的onPostExecute，从而调用setUpReactContext，会将ReactRootView做为Root View传递给UIManagerModule，此后Js通过UIManager创建的View都会add到该View上。

/**
 * ReactInstanceManagerImpl.java
 */
@Override
public void attachMeasuredRootView(ReactRootView rootView) {
  UiThreadUtil.assertOnUiThread();
  if(mIsNeedDetachView){
    Log.d(ReactConstants.QZONE_REACT_SRC_TAG,"attachMeasuredRootView do add");
    mAttachedRootViews.add(rootView);
    // If react context is being created in the background, JS application will be started
    // automatically when creation completes, as root view is part of the attached root view list.
    if (!mIsContextInitAsyncTaskRunning && mCurrentReactContext != null) {
      attachMeasuredRootViewToInstance(rootView, mCurrentReactContext.getCatalystInstance());
    }
  }else{
    Log.d(ReactConstants.QZONE_REACT_SRC_TAG,"attachMeasuredRootView do nothing");
  }

}

在绑定完RootView后，通过CatalystInstance获取AppRegistry这个JSModule后，进一步调用runApplication启动Js Application。

/**
 * ReactInstanceManagerImpl.java
 */
private void attachMeasuredRootViewToInstance(
    ReactRootView rootView,
    CatalystInstance catalystInstance) {

  rootView.removeAllViews();
  rootView.setId(View.NO_ID);

  UIManagerModule uiManagerModule = catalystInstance.getNativeModule(UIManagerModule.class);
  int rootTag = uiManagerModule.addMeasuredRootView(rootView);
  @Nullable Bundle launchOptions = rootView.getLaunchOptions();
  WritableMap initialProps = launchOptions != null
      ? Arguments.fromBundle(launchOptions)
      : Arguments.createMap();
  String jsAppModuleName = rootView.getJSModuleName();

  WritableNativeMap appParams = new WritableNativeMap();
  appParams.putDouble("rootTag", rootTag);
  appParams.putMap("initialProps", initialProps);
  catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName, appParams);
}

ReactNative中Java与Js通信不再赘述。至此，启动Js层AppRegistry的runApplication启动Js Application。

/**
* AppRegistry.js
*/
runApplication: function(appKey: string, appParameters: any): void {
  console.log(
    ‘Running application "‘ + appKey + ‘" with appParams: ‘ +
    JSON.stringify(appParameters) + ‘. ‘ +
    ‘__DEV__ === ‘ + String(__DEV__) +
    ‘, development-level warning are ‘ + (__DEV__ ? ‘ON‘ : ‘OFF‘) +
    ‘, performance optimizations are ‘ + (__DEV__ ? ‘OFF‘ : ‘ON‘)
  );
  invariant(
    runnables[appKey] && runnables[appKey].run,
    ‘Application ‘ + appKey + ‘ has not been registered. This ‘ +
    ‘is either due to a require() error during initialization ‘ +
    ‘or failure to call AppRegistry.registerComponent.‘
  );
  runnables[appKey].run(appParameters);
},

 

时间： 2024-10-13 00:14:15

ReactNative For Android 框架启动核心路径剖析的相关文章

Android 框架启动流程

As we all know,Android手机系统本质上是一个基于Linux的应用程序,它以Linux系统为内核.因此系统的启动过程包括Linux内核启动和Android框架启动两个阶段. Linux内核启动 1.装载引导程序bootloader Linux内核启动时首先装载执行bootloader引导程序,装载完成后进入内核程序. 2.加载Linux内核 Linux内核加载主要包括初始化kernel核心(内存初始化,打开中断,初始化进程表等).初始化驱动.启动内核后台(daemons)线程.

ABP 框架从源码学习——abp框架启动核心类AbpBootstrapper（2）

在AbpBootstrapper中的两个至关重要的属性:IIocManager 和 IAbpModuleManager  1 public class AbpBootstrapper : IDisposable 2 { 3 /// <summary> 4 /// Gets IIocManager object used by this class. 5 /// </summary> 6 public IIocManager IocManager { get; private set

android插件化-apkplug框架启动-02

本文章基于apkplug v1.6.7 版本编写,最新方式以官网最新消息为准 一 apkplug框架所需要的库文件(宿主) 可从http://git.oschina.net/plug/apkplugSDK  获取最新库文件 同时可下载最新的apkplugdemo源码 http://git.oschina.net/plug/apkplugDemos libs-- --libndkfoo.so   armeabi armeabi-v7a mips x86 --Bundle(版本号).jar 将以上的

Eclipse启动之四 ： Eclipse核心框架启动(百度空间迁移)

框架启动位于org.eclipse.osgi_<version>插件中,入口为org.eclipse.core.runtime.adaptor.EclipseStarter.run(String[] args, Runnable endSplashHandler) 其中最主要的方法是Startup方法,其主要功能: 1.初始化框架属性信息     FrameworkProperties 2.处理命令行参数 3.初始化LocationManager 4.加载config.ini中配置信息 5.创

Android开机启动过程分析

首先android是基于Linux的内核,只有先加载了kernel才能启动安卓,对于Linux来说android只是其上的一个应用程序.Android的启动大致可以形象的划分为三个过程: Init->init.rc->zygote.从事嵌入式开发的人都知道,Linux加载完内核驱动后会挂载'/'根文件系统,挂载完成后会执行'/init'二进制程序,这也是内核启动后执行的第一个用户程序,android里面也是这样.这个程序的main函数位于android/system/core/init/ini

React-Native 与 Android 集成 &lt;三、原理与总结&gt;

原文:腾讯Bugly(http://bugly.qq.com) ReactNative 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 基于Web,iOS 和 Android 平台的原生应用.Facebook 在2015.9.15发布了 ReactNative for Android,把JavaScript 开发技术扩展到了Android平台. 当前腾讯产品部分介绍: 目前ReactNative的版本节奏大概是两周一个版本,空间从11的版本便开始尝试接

react-native for android windows开发环境搭建详细记录

先说说整个环境搭建的过程.上周开始要在windows上搭建react-native for android环境,当时按照找的教程,从git上clone master分支的代码,然后下载了node,安装react-native框架还是很顺利的. 导入到android studio上就无法构建,找找了找原因没有解决,折腾了1天没解决,在这之后也遇到很多问题,搭建过程还是比较曲折的,折腾了好几天才弄好.下面是我的详细安装过程. 搭建环境前的准备 开始安装react-native 创建react-nat

IOS 与ANDROID框架及应用开发模式对比一

IOS 和ANDROID操作系统都是目前流行的移动操作系统,被移动终端和智能设备大量采用,两者都采用了先进的软件技术进行设计,为了方便应用开发两者都采用了先进的设计模式.两者在框架设计上都采用了什么技术?都采用了什么设计模式?两者设计思路和应用开发模式有什么异同呢? 两者都采用了框架模式. IOS 的框架称为Cocoa Touch. 框架提供两个作用,一是类的集合,每个类构建一个问题空间,并提供完整的解决方案和服务:二更重要的是框架中的类相互依赖构成一个整体,制订并实现整个应用程序的结构.框架定

杂谈——Android从启动到程序运行发生的事情

转载请注明出处 博客地址:http://blog.csdn.net/JonsTank2013/article/details/51118563 作者:李中权 前言 好久没有写博客了,瞬间感觉好多学了的东西不进行一个自我的总结与消化总归变不成自己的.通过博客可能还可以找到一些当初在学习的时候没有想到的问题.想了半天,从大二上学期自学Android以来还没有对Android从启动到程序运行期间进行一个完整的归纳,刚好最近又学到了一些新东西,那就以这篇博客为媒介,总结一下从Android启动到程序运行