從 Java 層看 React-Native 通訊機制

-2，前言

最近我們公司突然開始涉足react-native開發，老實說，我內心是拒絕的。其一，是因為目前我對於原生開發還不夠精通，不想突然轉向，其二是因為react-native目前還沒有1.0的正式版本，仍然處於探索期不穩定。其三，我特麼開發react-native用的是windows啊，人家facebook的工程師開發這玩兒用的都是mac。看在工資的份兒上，我開始探索react-native。

-1，解釋說明

• 說實話，一開始就上這麼難的話題，我也是沒辦法。關於環境整合，跑demo等等遇到的這些坑，雖然積攢了一點經驗，但是很多時候，我是懵逼的，所以總結這些經驗而不說出問題的根源，不去探究為什麼，這不是我的風格。而通訊機制則是一整套嚴肅的設計，知根知底，而且隨著對於原理的深究，以後對於問題的根源就會更加明瞭（不過windows環境下還是不要立這種flag比較好）。
• 其次，作為react-native的菜鳥，我駕馭這個問題是有一些難度的，但是，這也正好是另一種優勢，那就是，我能以一個react-native的菜鳥的角度，去解釋Java與js的通訊機制，應該是對於剛接觸react-native的原生開發的工程師更加友好。
• 最後，我在探究這個問題的過程中，找到了很多很棒的博文，比如其實沒那麼複雜！探究react-native通訊機制等等，對於這些前輩，我只有獻上自己的膝蓋。 我目前用的RN的最新版本，而他們的版本應該是有點老，因此程式碼其實跟上面的作者的程式碼有些許出入。

0，鋪墊

首先我們要明白以下幾點：

• 在react-native中的通訊，主要是Java與JavaScript之間的通訊，而實際上，Java與Js之間是根本沒辦法直接對話的，別看他們看起來好像是親戚，實際上他們的關係就相當於雷鋒和雷峰塔的關係
• 那麼Java和Js之間想要能聽懂對方的話，有兩個必備條件：
  • 雙方的資訊要能夠傳達到對方那裡去，就是，先不管聽不聽的懂 ，你首先要把話傳過去
  • 資訊傳達前需要經過翻譯，才能被接受方正確理解。
• 第一個條件的解決方案是通過C++來做這個傳話筒，Java通過JNI來call到c++層，然後c++層再把資訊傳到js，反之亦然；第二個條件的解決方案就是通過在初始化的時候構造兩本“詞典”，約定好以後說話只說對方寫好的“詞典”上的單詞，保證對方能聽懂。

所以我們的問題其實只有兩點：那就是集中精力觀察“詞典”是怎麼傳遞到雙方手裡的，以及兩方是怎麼傳遞資料的。

1，開篇

1.1，Java傳遞“詞典”

首先，對於詞典還是正確解釋一下，它是某種config，某種配置檔案，每次Java層收到js層傳來的的資訊，都會讀取這個檔案，然後才能理解Java層的意思。Java層也是一樣。他們對應RN的程式碼的類分別是：NativeModuleRegistry和JavaScriptModuleRegistry

初始化的開端源自ReactActivity，這是react-native中的類，它的onCreate()方法中是這麼做的：

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) {
      // Get permission to show redbox in dev builds.
      if (!Settings.canDrawOverlays(this)) {
        Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
        startActivity(serviceIntent);
        FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);
        Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();
      }
    }

    mReactRootView = createRootView();
    //這是最重要的一步
    mReactRootView.startReactApplication(
      getReactNativeHost().getReactInstanceManager(),
      getMainComponentName(),
      getLaunchOptions());
    setContentView(mReactRootView);
    mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
  }複製程式碼

mRootView是一個layout,繼承自FrameLayout,一切的js渲染從這個Layout上開始，它的startReactApplication()方法如下：

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

    // TODO(6788889): Use POJO instead of bundle here, apparently we can't just use WritableMap
    // here as it may be deallocated in native after passing via JNI bridge, but we want to reuse
    // it in the case of re-creating the catalyst instance
    Assertions.assertCondition(
        mReactInstanceManager == null,
        "This root view has already been attached to a catalyst instance manager");

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

    //這是關鍵
    if (!mReactInstanceManager.hasStartedCreatingInitialContext()) {
      mReactInstanceManager.createReactContextInBackground();
    }

    // We need to wait for the initial onMeasure, if this view has not yet been measured, we set which
    // will make this view startReactApplication itself to instance manager once onMeasure is called.
    if (mWasMeasured) {
      attachToReactInstanceManager();
    }
  }複製程式碼

這裡有一個ReactInstanceManager,它的作用就是管理CatalystInstance的例項，CatalystInstance是什麼？這是一個上層抽象的呼叫介面），Java和Js都可以通過這個去呼叫對方，當然，那兩個類都是抽象的，實際上都是通過它們的XXXXImpl類來實現具體的功能。

那麼我們接著往下，注意我們的目的：瞭解初始化時如何傳遞那兩本“詞典”的，mReactInstanceManager.createReactContextInBackground();這個方法就直接呼叫到了它的實現類：XReactInstanceManagerImpl中的createReactContextInBackground然後接下來的流程就是：

createReactContextInBackground（）------> recreateReactContextInBackgroundInner(); -------> recreateReactContextInBackgroundFromBundleLoader(); ---------> recreateReactContextInBackground() ;

到了recreateReactContextInBackground()這個方法大概是這樣的：

  private void recreateReactContextInBackground(
      JavaScriptExecutor.Factory jsExecutorFactory,
      JSBundleLoader jsBundleLoader) {
    UiThreadUtil.assertOnUiThread();

    //構造引數
    ReactContextInitParams initParams =
        new ReactContextInitParams(jsExecutorFactory, jsBundleLoader);
    if (mReactContextInitAsyncTask == null) {
      // No background task to create react context is currently running, create and execute one.
      //執行了一個AsyncTask.......
      mReactContextInitAsyncTask = new ReactContextInitAsyncTask();
      mReactContextInitAsyncTask.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, initParams);
    } else {
      // Background task is currently running, queue up most recent init params to recreate context
      // once task completes.
      mPendingReactContextInitParams = initParams;
    }
  }複製程式碼

好我們接下來看這個執行緒內部的細節,重點看doInBackground（）這個方法：

 @Override
    protected Result<ReactApplicationContext> doInBackground(ReactContextInitParams... params) {
      // TODO(t11687218): Look over all threading
      // Default priority is Process.THREAD_PRIORITY_BACKGROUND which means we'll be put in a cgroup
      // that only has access to a small fraction of CPU time. The priority will be reset after
      // this task finishes: https://android.googlesource.com/platform/frameworks/base/+/
      d630f105e8bc0021541aacb4dc6498a49048ecea/core/java/android/os/AsyncTask.java#256
      Process.setThreadPriority(Process.THREAD_PRIORITY_DEFAULT);

      Assertions.assertCondition(params != null && params.length > 0 && params[0] != null);
      try {
        JavaScriptExecutor jsExecutor = params[0].getJsExecutorFactory().create();

        //createReactContext()這個方法被執行
        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);
      }
    }複製程式碼

接下去看createReactContext(jsExecutor, params[0].getJsBundleLoader())這個方法：

/**
   * @return instance of {@link ReactContext} configured a {@link CatalystInstance} set
   */
  private ReactApplicationContext createReactContext(
      JavaScriptExecutor jsExecutor,
      JSBundleLoader jsBundleLoader) {
    FLog.i(ReactConstants.TAG, "Creating react context.");
    ReactMarker.logMarker(CREATE_REACT_CONTEXT_START);
    mSourceUrl = jsBundleLoader.getSourceUrl();

    //你瞧，之前提到的兩本“詞典”，他們的Builder已經露面了。
    NativeModuleRegistry.Builder nativeRegistryBuilder = new NativeModuleRegistry.Builder();
    JavaScriptModuleRegistry.Builder jsModulesBuilder = new JavaScriptModuleRegistry.Builder();

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

    ReactMarker.logMarker(PROCESS_PACKAGES_START);
    Systrace.beginSection(
        TRACE_TAG_REACT_JAVA_BRIDGE,
        "createAndProcessCoreModulesPackage");
    try {

    //CoreModulesPackage裡面定義了RN框架核心的一些Java和JS的module
    //通過processPackage（）方法寫入到兩本“詞典”的Builder中
      CoreModulesPackage coreModulesPackage =
          new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider);

      processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
    } finally {
      Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
    }

    // TODO(6818138): Solve use-case of native/js modules overriding
    //這裡是開發者自己定義或封裝的一些元件或者事件的package
    for (ReactPackage reactPackage : mPackages) {
      Systrace.beginSection(
          TRACE_TAG_REACT_JAVA_BRIDGE,
          "createAndProcessCustomReactPackage");
      try {
        processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
      } finally {
        Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
      }
    }
    ReactMarker.logMarker(PROCESS_PACKAGES_END);

    ReactMarker.logMarker(BUILD_NATIVE_MODULE_REGISTRY_START);
    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "buildNativeModuleRegistry");
    NativeModuleRegistry nativeModuleRegistry;
    try {
        //好了，建立了用於翻譯Java端的“詞典”
       nativeModuleRegistry = nativeRegistryBuilder.build();
    } finally {
      Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
      ReactMarker.logMarker(BUILD_NATIVE_MODULE_REGISTRY_END);
    }

    NativeModuleCallExceptionHandler exceptionHandler = mNativeModuleCallExceptionHandler != null
        ? mNativeModuleCallExceptionHandler
        : mDevSupportManager;
    CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder()
        .setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())
        .setJSExecutor(jsExecutor)
        .setRegistry(nativeModuleRegistry)
        //建立了用於翻譯JS端的“詞典”
        .setJSModuleRegistry(jsModulesBuilder.build())
        .setJSBundleLoader(jsBundleLoader)
        .setNativeModuleCallExceptionHandler(exceptionHandler);

    //到目前為止。兩本“詞典”都已經建立完畢，而且全部都在CatalystInstance這個類的**實現類的Builder中**，此時你可以回憶一下整個過程，理清一下思路。

    ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_START);
    // CREATE_CATALYST_INSTANCE_END is in JSCExecutor.cpp
    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "createCatalystInstance");
    final CatalystInstance catalystInstance;
    try {
      //這個Build（）很關鍵，它用實現類的Builder建立了一個CatalystInstance類。
      catalystInstance = catalystInstanceBuilder.build();
    } finally {
      Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
      ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_END);
    }

    if (mBridgeIdleDebugListener != null) {
      catalystInstance.addBridgeIdleDebugListener(mBridgeIdleDebugListener);
    }

    ReactMarker.logMarker(RUN_JS_BUNDLE_START);
    try {
      catalystInstance.getReactQueueConfiguration().getJSQueueThread().callOnQueue(
        new Callable<Void>() {
          @Override
          public Void call() throws Exception {
            reactContext.initializeWithInstance(catalystInstance);

            Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "runJSBundle");
            try {
                //在這裡就執行js程式碼說明至少在這個方法之前，“詞典”應該傳過去了
                //於是我們刻印回去聚焦到catalystInstance = catalystInstanceBuilder.build();這段程式碼
              catalystInstance.runJSBundle();
            } finally {
              Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
              ReactMarker.logMarker(RUN_JS_BUNDLE_END);
            }
            return null;
          }
        }).get();
    } catch (InterruptedException e) {
      throw new RuntimeException(e);
    } catch (ExecutionException e) {
      if (e.getCause() instanceof RuntimeException) {
        throw (RuntimeException) e.getCause();
      } else {
        throw new RuntimeException(e);
      }
    }

    return reactContext;
  }

  //將package中的關於Java和js的東西分別新增到兩本“詞典”的builder中
   private void processPackage(
      ReactPackage reactPackage,
      ReactApplicationContext reactContext,
      NativeModuleRegistry.Builder nativeRegistryBuilder,
      JavaScriptModuleRegistry.Builder jsModulesBuilder) {
    for (NativeModule nativeModule : reactPackage.createNativeModules(reactContext)) {
      nativeRegistryBuilder.add(nativeModule);
    }
    for (Class<? extends JavaScriptModule> jsModuleClass : reactPackage.createJSModules()) {
      jsModulesBuilder.add(jsModuleClass);
    }
  }複製程式碼

catalystInstanceBuilder.build()這段程式碼具體實現如下：

    public CatalystInstanceImpl build() {
      return new CatalystInstanceImpl(
          Assertions.assertNotNull(mReactQueueConfigurationSpec),
          Assertions.assertNotNull(mJSExecutor),
          Assertions.assertNotNull(mRegistry),
          Assertions.assertNotNull(mJSModuleRegistry),
          Assertions.assertNotNull(mJSBundleLoader),
          Assertions.assertNotNull(mNativeModuleCallExceptionHandler));
    }複製程式碼

這個方法的作用就是直接new了一個CatalystInstanceImpl類，那麼我們接下去看CatalystInstanceImpl類的構造方法：

 private CatalystInstanceImpl(
      final ReactQueueConfigurationSpec ReactQueueConfigurationSpec,
      final JavaScriptExecutor jsExecutor,
      final NativeModuleRegistry registry,
      final JavaScriptModuleRegistry jsModuleRegistry,
      final JSBundleLoader jsBundleLoader,
      NativeModuleCallExceptionHandler nativeModuleCallExceptionHandler) {
    FLog.d(ReactConstants.TAG, "Initializing React Xplat Bridge.");
    mHybridData = initHybrid();

    mReactQueueConfiguration = ReactQueueConfigurationImpl.create(
        ReactQueueConfigurationSpec,
        new NativeExceptionHandler());
    mBridgeIdleListeners = new CopyOnWriteArrayList<>();
    //這個就是Java層要傳遞給Js層的“詞典”
    mJavaRegistry = registry;
    mJSModuleRegistry = jsModuleRegistry;
    mJSBundleLoader = jsBundleLoader;
    mNativeModuleCallExceptionHandler = nativeModuleCallExceptionHandler;
    mTraceListener = new JSProfilerTraceListener(this);

    //在這個方法裡，就把Java暴露給Js的詞典傳了進去
    initializeBridge(
      new BridgeCallback(this),
      jsExecutor,
      mReactQueueConfiguration.getJSQueueThread(),
      mReactQueueConfiguration.getNativeModulesQueueThread(),
      //getModuleRegistryHolder（）這個方法不過是一種holder,對“詞典”做了一些封裝。
      mJavaRegistry.getModuleRegistryHolder(this));
    mMainExecutorToken = getMainExecutorToken();
  }

  //你瞧，native方法，直接call到C++層，接下來，由C++層通過各種折騰，然後生成某種配置檔案，轉發到Js端
   private native void initializeBridge(ReactCallback callback,
                                       JavaScriptExecutor jsExecutor,
                                       MessageQueueThread jsQueue,
                                       MessageQueueThread moduleQueue,
                                       ModuleRegistryHolder registryHolder);複製程式碼

好了，關於“詞典”是如何傳遞過去的，就解釋到這裡，雖然C++層可能有更多操作，但是目的就是一個，把Java類轉化成一個JS讀得懂的格式的檔案。 那麼我們接下來看看C++是如何做好傳聲筒的

1.2，資料傳遞過程

初始化完成之後，Java端和Js端都有了“詞典”，就可把自己的意圖翻譯成對方能聽得懂的話了，這個時候交流就會暢通了。

1.2.1，Java --> Js

這個問題首先Java層應該做的是找到那本Js的詞典，所以我們應該尋找Java層是在哪裡呼叫到了JSModuleRegistry這個類的，

讓我們退回到ReactContextInitAsyncTask的doInBackground方法中，在詞典傳遞完畢之後，這個方法基本執行完畢，接下來是

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

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

setupReactContext(result.get())這個方法,然後這個方法又會呼叫attachMeasuredRootViewToInstance（）方法：

 private void attachMeasuredRootViewToInstance(
      ReactRootView rootView,
      CatalystInstance catalystInstance) {
    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "attachMeasuredRootViewToInstance");
    UiThreadUtil.assertOnUiThread();

    // Reset view content as it's going to be populated by the application content from JS
    rootView.removeAllViews();
    rootView.setId(View.NO_ID);

    UIManagerModule uiManagerModule = catalystInstance.getNativeModule(UIManagerModule.class);
    int rootTag = uiManagerModule.addMeasuredRootView(rootView);
    rootView.setRootViewTag(rootTag);
    @Nullable Bundle launchOptions = rootView.getLaunchOptions();
    WritableMap initialProps = Arguments.makeNativeMap(launchOptions);
    String jsAppModuleName = rootView.getJSModuleName();

    WritableNativeMap appParams = new WritableNativeMap();
    appParams.putDouble("rootTag", rootTag);
    appParams.putMap("initialProps", initialProps);

    //在這裡，Java找到了那本Js的“詞典”，然後runApplication
    catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName, appParams);
    Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
  }複製程式碼

其實catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName, appParams)這段程式碼比較複雜，首先getJSModule方法具體實現在catalystInstanceImpl中，然後會呼叫到mJSModuleRegistry.getJavaScriptModule(this, executorToken, jsInterface)中，程式碼如下：

  public synchronized <T extends JavaScriptModule> T getJavaScriptModule(
    CatalystInstance instance,
    ExecutorToken executorToken,
    Class<T> moduleInterface) {
    HashMap<Class<? extends JavaScriptModule>, JavaScriptModule> instancesForContext =
        mModuleInstances.get(executorToken);
    if (instancesForContext == null) {
      instancesForContext = new HashMap<>();
      mModuleInstances.put(executorToken, instancesForContext);
    }

    JavaScriptModule module = instancesForContext.get(moduleInterface);
    if (module != null) {
      return (T) module;
    }

    JavaScriptModuleRegistration registration =
        Assertions.assertNotNull(
            mModuleRegistrations.get(moduleInterface),
            "JS module " + moduleInterface.getSimpleName() + " hasn't been registered!");
    //關鍵
    JavaScriptModule interfaceProxy = (JavaScriptModule) Proxy.newProxyInstance(
        moduleInterface.getClassLoader(),
        new Class[]{moduleInterface},
        new JavaScriptModuleInvocationHandler(executorToken, instance, registration));
    instancesForContext.put(moduleInterface, interfaceProxy);
    return (T) interfaceProxy;
  }複製程式碼

什麼動態代理不用理他，看 new JavaScriptModuleInvocationHandler(executorToken, instance, registration)這個類：

  private static class JavaScriptModuleInvocationHandler implements InvocationHandler {

    private final WeakReference<ExecutorToken> mExecutorToken;
    private final CatalystInstance mCatalystInstance;
    private final JavaScriptModuleRegistration mModuleRegistration;

    public JavaScriptModuleInvocationHandler(
        ExecutorToken executorToken,
        CatalystInstance catalystInstance,
        JavaScriptModuleRegistration moduleRegistration) {
      mExecutorToken = new WeakReference<>(executorToken);
      mCatalystInstance = catalystInstance;
      mModuleRegistration = moduleRegistration;
    }

    //關鍵
    @Override
    public @Nullable Object invoke(Object proxy, Method method, @Nullable Object[] args) throws Throwable {
      ExecutorToken executorToken = mExecutorToken.get();
      if (executorToken == null) {
        FLog.w(ReactConstants.TAG, "Dropping JS call, ExecutorToken went away...");
        return null;
      }
      NativeArray jsArgs = args != null ? Arguments.fromJavaArgs(args) : new WritableNativeArray();
      mCatalystInstance.callFunction(
        executorToken,
        mModuleRegistration.getName(),
        method.getName(),
        jsArgs
      );
      return null;
    }
  }
}複製程式碼

invoke方法通過mCatalystInstance呼叫了callFunction（）方法；不用多想，我們直接在實現類中去找這個方法：

@Override
  public void callFunction(
      ExecutorToken executorToken,
      final String module,
      final String method,
      final NativeArray arguments) {
    if (mDestroyed) {
      FLog.w(ReactConstants.TAG, "Calling JS function after bridge has been destroyed.");
      return;
    }
    if (!mAcceptCalls) {
      throw new RuntimeException("Attempt to call JS function before JS bundle is loaded.");
    }

    callJSFunction(executorToken, module, method, arguments);
  }


    private native void callJSFunction(ExecutorToken token,String module, String method,NativeArray arguments);複製程式碼

callFunction()方法裡面呼叫了callJSFunction（）這個本地方法，然後由C++做轉發，這個本地方法傳遞的引數有token,包名，方法名，和引數,

至此，從Java端呼叫到Js端的過程，到這裡可以宣告結束了。

1.2.2，js-->Java

待續。

2，矯正

• 暫無

3，總結

• 首先這裡沒有分析js端到java端的過程，是因為我目前對於js還不是十分熟悉，目前還沒有把我能用自己的話吧這件事說清楚，所以先挖坑，到時候一定填上。
• 從開發的角度來看整個react-native兩端通訊，其實我們最終是避不開這些框架層的東西的，架構在原生Android的系統之上的js無論如何都是需要和Java溝通的，雖然react-native封裝了一些事件和元件，但是假如業務需要而框架沒有封裝，那你就不得不直面這種通訊了。
• 還是原生開發好，windows說。