React-Native之通信机制

最新推荐文章于 2022-09-28 19:46:39 发布
最新推荐文章于 2022-09-28 19:46:39 发布
阅读量2.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/watertekhqx/article/details/51302216
版权

近段时间来Android上最火的框架非react native莫属了，这里我不去评价这个框架的好坏，毕竟只有用过的人才会有深刻的体会。但是我个人有一个习惯，在使用一个开源库之前，一定要看过它的源码，不说百分百搞懂吧，至少得弄清楚它的工作原理，所以在使用RN之前我就看了看它的源码。不看不知道，一看吓一跳，它其中最核心的那一部分——java和js的通信写的确实是非常的精妙，把整个流程搞懂以后让我受益无穷。

这里插一句题外话，阿里的weex也马上就要开源了，我身边的小伙伴也有已经拿到源码投身于其中的，等到它开源的时候我也会去看看它的源码，了解下它和RN的区别到底是什么。

废话也不说了，让我们好好看看RN的通信机制吧。

前言

在看这篇文章之前，你得确保你有一定的RN开发基础，如果是零基础的同学，建议大家先去看看这个系列的文章，里面非常清楚的介绍了如何使用RN来进行开发。当然如果你不满足仅仅是［了解］的话，也可以去网上查阅关于RN的一些资料，其实里面一些东西是非常值得一看的，比如virtual DOM，diff机制等等。

通信方式

我们所说的［通信］，指的是RN中Java和js的通信，也就是js部分中的那些jsx代码是如何转化成一个java层真实的view和事件的，java层又是如何调用js来找出它所需要的那些view和事件的。

简单的说，RN的两端通信靠的是一张配置表，java端和js端持有同一张表，通信的时候就是靠这张表的各个条目的对应来进行的。

connection

大致的就是和上面这张图一样，两端各持有一份相同的config，config中有一些已经注册的模块，两端的通信就是通过传输这样的“A”，“B”或者”C”来实现的。这个config对应到RN的代码是NativeModuleRegistry和JavaScriptModuleRegistry。如果大家想象不出来的话我可以给大家打个比喻，java端和js端的通信就好比一个中国人和一个美国人在对话，而这个config，也就是注册表就相当于两个翻译，有了翻译两个语言不通的人才能正常交流。那这两张表是如何生成的呢？还是让我们从代码中寻找答案吧。

首先我们知道在使用RN的时候，我们对应的activity要继承自ReactActivity并且重写一个叫做getPackages的方法。

1
2
3
4
5
6

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage()
    );
}

这个MainReactPackage是RN帮我们生成好的，其中定义了一些基础的组件和事件，具体就不说了，大家可以自己去看一下源码。如果你想要自定义一些组件或者事件的话必须要自己去写一个package，至于怎么写大家看我前面提到的那一系列文章就知道了。而我们前面提到的那两个注册表——NativeModuleRegistry和JavaScriptModuleRegistry就是通过这样的package去生成的，具体方法我们看下去就知道了。

既然我们的activity继承自了ReactActivity，那我们就去看看ReactActivity里面做了什么。第一个要看的当然是onCreate函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@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();
    }
  }

  mReactInstanceManager = createReactInstanceManager();
  ReactRootView mReactRootView = createRootView();
  mReactRootView.startReactApplication(mReactInstanceManager, getMainComponentName(), getLaunchOptions());
  setContentView(mReactRootView);
}

可以看到我们创建了一个ReactInstanceManager，看看是怎么创建的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

protected ReactInstanceManager createReactInstanceManager() {
  ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setJSMainModuleName(getJSMainModuleName())
      .setUseDeveloperSupport(getUseDeveloperSupport())
      .setInitialLifecycleState(mLifecycleState);

  for (ReactPackage reactPackage : getPackages()) {
    builder.addPackage(reactPackage);
  }

  String jsBundleFile = getJSBundleFile();

  if (jsBundleFile != null) {
    builder.setJSBundleFile(jsBundleFile);
  } else {
    builder.setBundleAssetName(getBundleAssetName());
  }

  return builder.build();
}

中间有一段这样的代码

1
2
3

for (ReactPackage reactPackage : getPackages()) {
  builder.addPackage(reactPackage);
}

通过builder模式把我们的package注入到了builder中并且最后调用build方法创建出一个ReactInstanceManagerImpl实例。

我们回过头来看onCreate函数，在这之后我们创建一个ReactRootView作为我们的根视图，并且调用它的startReactApplication函数，从函数名字就可以看出来，这个函数的作用非常重要，从这儿开始，算是启动了我们的RN程序。

在startReactApplication函数中我们调用了ReactInstanceManager的createReactContextInBackground()方法去构造属于RN程序的上下文。在这个方法中会去判断是否是开发模式，大家可以在自己的activity中重写getUseDeveloperSupport()去更改模式。模式不同的主要区别在于获取JSBundle的方式不同。如果你是开发模式的，就会从server端获取，如果不是，则是从文件中获取。这里我们只关注前者。最终会走到onJSBundleLoadedFromServer方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private void onJSBundleLoadedFromServer() {
  recreateReactContextInBackground(
      new JSCJavaScriptExecutor.Factory(),
      JSBundleLoader.createCachedBundleFromNetworkLoader(
          mDevSupportManager.getSourceUrl(),
          mDevSupportManager.getDownloadedJSBundleFile()));
}

private void recreateReactContextInBackground(
      JavaScriptExecutor.Factory jsExecutorFactory,
      JSBundleLoader jsBundleLoader) {
      ..........
        
      mReactContextInitAsyncTask = new ReactContextInitAsyncTask();
      mReactContextInitAsyncTask.execute(initParams);
  }

在该方法中我们调用JSBundleLoader的createCachedBundleFromNetworkLoader方法去创建了一个JSBundleLoader。它的主要作用是去加载JSBundle。大家可以去看看JSBundleLoader这个类，其中还有两种创建loader的方式，如果我们不是开发模式，调用的是createFileLoader，也就是说release的情况下我们需要用gradle生成了JSBundle之后将其放在assets目录上或者文件中。

下面让我们看看之后的recreateReactContextInBackground方法。

它会调用了一个叫做mReactContextInitAsyncTask的AsyncTask去执行异步任务。

1
2
3
4
5
6
7
8
9
10
11
12
13

@Override
protected Result<ReactApplicationContext> doInBackground(ReactContextInitParams... params) {
  Assertions.assertCondition(params != null && params.length > 0 && params[0] != null);
  try {
    JavaScriptExecutor jsExecutor =
        params[0].getJsExecutorFactory().create(
          mJSCConfig == null ? new WritableNativeMap() : mJSCConfig.getConfigMap());
    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);
  }
}

我们可以看到它的doInBackground方法调用了createReactContext()方法去创建上下文。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

private ReactApplicationContext createReactContext(
    JavaScriptExecutor jsExecutor,
    JSBundleLoader jsBundleLoader) {
  FLog.i(ReactConstants.TAG, "Creating react context.");
  ReactMarker.logMarker(CREATE_REACT_CONTEXT_START);
  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);
  }

  ReactMarker.logMarker(PROCESS_PACKAGES_START);
  Systrace.beginSection(
      Systrace.TRACE_TAG_REACT_JAVA_BRIDGE,
      "createAndProcessCoreModulesPackage");
  try {
    CoreModulesPackage coreModulesPackage =
        new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider);
    processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
  } finally {
    Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
  }

  // TODO(6818138): Solve use-case of native/js modules overriding
  for (ReactPackage reactPackage : mPackages) {
    Systrace.beginSection(
        Systrace.TRACE_TAG_REACT_JAVA_BRIDGE,
        "createAndProcessCustomReactPackage");
    try {
      processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
    } finally {
      Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
    }
  }
  ReactMarker.logMarker(PROCESS_PACKAGES_END);

  ReactMarker.logMarker(BUILD_NATIVE_MODULE_REGISTRY_START);
  Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "buildNativeModuleRegistry");
  NativeModuleRegistry nativeModuleRegistry;
  try {
     nativeModuleRegistry = nativeRegistryBuilder.build();
  } finally {
    Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
    ReactMarker.logMarker(BUILD_NATIVE_MODULE_REGISTRY_END);
  }

  ReactMarker.logMarker(BUILD_JS_MODULE_CONFIG_START);
  Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "buildJSModuleConfig");
  JavaScriptModulesConfig javaScriptModulesConfig;
  try {
    javaScriptModulesConfig = jsModulesBuilder.build();
  } finally {
    Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
    ReactMarker.logMarker(BUILD_JS_MODULE_CONFIG_END);
  }

  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);

  ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_START);
  // CREATE_CATALYST_INSTANCE_END is in JSCExecutor.cpp
  Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "createCatalystInstance");
  CatalystInstance catalystInstance;
  try {
    catalystInstance = catalystInstanceBuilder.build();
  } finally {
    Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
    ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_END);
  }

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

  reactContext.initializeWithInstance(catalystInstance);

  ReactMarker.logMarker(RUN_JS_BUNDLE_START);
  Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "runJSBundle");
  try {
    catalystInstance.runJSBundle();
  } finally {
    Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
    ReactMarker.logMarker(RUN_JS_BUNDLE_END);
  }

  return reactContext;
}

这个方法的代码就比较多了，但是我们现在只看我们所关注的。大家应该还记得我们的关注点吧？［两个注册表NativeModuleRegistry和JavaScriptModuleRegistry是如何生成的］。这里给出了答案。

1
2

NativeModuleRegistry.Builder nativeRegistryBuilder = new NativeModuleRegistry.Builder();
JavaScriptModulesConfig.Builder jsModulesBuilder = new JavaScriptModulesConfig.Builder();

首先创建出两个builder。

1
2
3
4
5
6
7

try {
  CoreModulesPackage coreModulesPackage =
      new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider);
  processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
} finally {
  Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
}

然后会去new一个CoreModulesPackage并且使用了processPackage方法去处理它，这个CoreModulesPackage里面定义了RN框架核心的一些Java和JS的module。

下面让我们看看processPackage方法。

1
2
3
4
5
6
7
8
9
10
11
12

private void processPackage(
    ReactPackage reactPackage,
    ReactApplicationContext reactContext,
    NativeModuleRegistry.Builder nativeRegistryBuilder,
    JavaScriptModulesConfig.Builder jsModulesBuilder) {
  for (NativeModule nativeModule : reactPackage.createNativeModules(reactContext)) {
    nativeRegistryBuilder.add(nativeModule);
  }
  for (Class<? extends JavaScriptModule> jsModuleClass : reactPackage.createJSModules()) {
    jsModulesBuilder.add(jsModuleClass);
  }
}

很简单，拿到具体的native和JS的module把它们添加到对应的builder中。

再处理完了CoreModulesPackage之后，程序又会去处理我们在activity中注入的那些package。

1
2
3
4
5
6
7
8
9
10

for (ReactPackage reactPackage : mPackages) {
  Systrace.beginSection(
      Systrace.TRACE_TAG_REACT_JAVA_BRIDGE,
      "createAndProcessCustomReactPackage");
  try {
    processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
  } finally {
    Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
  }
}

接下去就是生成注册表了。

1
2
3
4
5
6
7
8
9
10
11
12
13

try {
   nativeModuleRegistry = nativeRegistryBuilder.build();
} finally {
   Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
   ReactMarker.logMarker(BUILD_NATIVE_MODULE_REGISTRY_END);
}

try {
   javaScriptModulesConfig = jsModulesBuilder.build();
} finally {
   Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
   ReactMarker.logMarker(BUILD_JS_MODULE_CONFIG_END);
}

至此，我们就把所有的packages，包括RN核心的CoreModulesPackage和我们activity自己注入的package里面的各个modules全部写到了对应Registry的builder中。

现在这两份注册表是存在于java端的，那要怎么传输到JS端呢？我们继续看下去。

再创建完了对应的注册表之后，ReactInstanceManagerImpl会通过builder模式去创建一个CatalystInstance的实例CatalystInstanceImpl。在CatalystInstanceImpl的构造函数中会去创建一个ReactBridge。并且会调用initializeBridge(jsExecutor, jsModulesConfig)这个方法。在这个方法中会去通过ReactBridge向C层传递一些数据，其中有这么一段：

1
2
3

bridge.setGlobalVariable(
    "__fbBatchedBridgeConfig",
    buildModulesConfigJSONProperty(mJavaRegistry, jsModulesConfig));

调用了bridge的setGlobalVariable方法，这是一个native的方法。

1

public native void setGlobalVariable(String propertyName, String jsonEncodedArgument);

这个方法的作用就是先把JavaRegistry格式化成json，并且调用C层的代码传输到js端。由于本人C层学艺不精，能看懂个大概，怕会有细节讲错，就不带大家进行分析了。

总结

到这里，真相就水落石出了，我们来总结一下吧。

(1) 在程序启动的时候，也就是ReactActivity的onCreate函数中，我们会去创建一个ReactInstanceManagerImpl对象

(2) 通过ReactRootView的startReactApplication方法开启整个RN世界的大门

(3) 在这个方法中，我们会通过一个AsyncTask去创建ReactContext

(4) 在创建ReactContext过程中，我们把我们自己注入(MainReactPackage)的和系统生成(CoreModulesPackage)的package通过processPackage方法将其中的各个modules注入到了对应的Registry中

(5) 最后通过CatalystInstanceImpl中的ReactBridge将java的注册表通过jni传输到了JS层。

这样，js层就获取到了java层的所有接口和方法，相当于一个美国人身边有了以为中文翻译。而js层的注册表本来就是由java层生成的，所以就相当于一个中国人身边有了一个英文翻译，从此他们就可以愉快的交流了。

涉及到的重要的类：

ReactInstanceManagerImpl，ReactContext，CatalystInstanceImpl，ReactBridge。

Java－>js

前面我们讲了两端通信的方式和注册表是如何从Java端发送到js端的，下面让我们讲讲这样的准备工作完成以后，java是如何调用js的方法的。

首先，经过上面的学习，其实这个问题已经有了一个初步的答案了，因为［将JavaRegistry从java端传输到js端］这个过程就是一个java向js通信的过程，具体的过程在上一节的总结中已经说了，让我们回想一下，之前所有的事情都是在ReactInstanceManagerImpl中ReactContextInitAsyncTask的doInBackground方法中完成的，那这个方法完成之后又做了什么呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@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;
  }
}

可以看到，在onPostExecute方法中调用了setupReactContext方法，在这个方法中会去调用attachMeasuredRootViewToInstance方法。

1
2
3
4
5
6
7
8

private void attachMeasuredRootViewToInstance(
    ReactRootView rootView,
    CatalystInstance catalystInstance) {
  .......
  .......

  catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName, appParams);
}

这个方法的最后用了我们的CatalystInstanceImpl的getJSModule方法，它会去调用JavaScriptModuleRegistry的getJSModule方法，获取对应的JavaScriptModule，也就是从注册表中获取对应的模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

public synchronized  <T extends JavaScriptModule> T getJavaScriptModule(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, mCatalystInstance, registration));
  instancesForContext.put(moduleInterface, interfaceProxy);
  return (T) interfaceProxy;
}

这个方法就比较神奇了，首先去缓存中找，如果找到就返回，没找到就去创建，怎么创建的呢，用的是动态代理！

1
2
3
4

JavaScriptModule interfaceProxy = (JavaScriptModule) Proxy.newProxyInstance(
    moduleInterface.getClassLoader(),
    new Class[]{moduleInterface},
    new JavaScriptModuleInvocationHandler(executorToken, mCatalystInstance, registration));

这里大家必须要对动态代理有所了解，可以自己去找相关的知识。让我们看看JavaScriptModuleInvocationHandler。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@Override
public @Nullable Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
  ExecutorToken executorToken = mExecutorToken.get();
  if (executorToken == null) {
    FLog.w(ReactConstants.TAG, "Dropping JS call, ExecutorToken went away...");
    return null;
  }
  String tracingName = mModuleRegistration.getTracingName(method);
  mCatalystInstance.callFunction(
    executorToken,
      mModuleRegistration.getModuleId(),
      mModuleRegistration.getMethodId(method),
      Arguments.fromJavaArgs(args),
      tracingName);
  return null;
}

我们看它最核心的invoke方法。里面获取了调用方法的moduleId，methodId和参数，然后调用了CatalystInstanceImpl的callFunction去执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@Override
public void callFunction(
    ExecutorToken executorToken,
    int moduleId,
    int methodId,
    NativeArray arguments,
    String tracingName) {
  synchronized (mJavaToJSCallsTeardownLock) {
    if (mDestroyed) {
      FLog.w(ReactConstants.TAG, "Calling JS function after bridge has been destroyed.");
      return;
    }

    incrementPendingJSCalls();

    Assertions.assertNotNull(mBridge).callFunction(executorToken, moduleId, methodId, arguments, tracingName);
  }
}

直接调用了ReactBridge的同名函数。

1

public native void callFunction(ExecutorToken executorToken, int moduleId, int methodId, NativeArray arguments, String tracingName);

可以看到又是一个native函数，具体作用就是将想用调用的方法对应的moduleId，methodId和arguments通过jni传递到js端进行调用。而我们这边调用的是AppRegistry的runApplication方法，这个方法在js端的作用就是开始运行整个js程序，从而将我们的RN程序真正的跑起来。

总结

首先，对于我们java端要调用的js端的类和方法，我们都必须要注册到js的注册表中，这个过程在上一部分的分析中已经带大家走过了。当真正要调用的时候，步骤是这样的：

(1) 调用CatalystInstanceImpl这个类的getJSModule方法去得到对应的JSModule

(2) CatalysInstanceImpl实际上是调用JavaScriptModuleRegistry的getJSModule方法去获取注册在其中的module

(3) 然后通过动态代理拿到方法的各种参数，包括moduleId，methodId和params

(4) 通过ReactBridge调用jni传递到C层

(5) 通过C层再传递到js层。

涉及到的重要的类：

CatalystInstanceImpl，JavaScriptModuleRegistry，JavaScriptModuleInvocationHandler，ReactBridge。

JavaCallJS

通过这个图配合上代码应该能比较好的理解了。

js－>Java

RN的js调java的流程可以说是让我觉得最新颖的地方，具体就是js不是直接通过注册接口去调用java方法的，而是将对应的的参数（moduleId和methodId）push到一个messageQueue中，等待java层的事件来驱动它，当java层的事件传递过来以后，js层把messageQueue中所有的数据返回给java层，再通过注册表JavaRegistry去调用方法。

首先，我们说了js层是把对应的参数push到messageQueue中，具体的方法是MessageQueue.js的__nativeCall方法。

1
2
3
4
5
6
7
8
9
10

__nativeCall(module, method, params, onFail, onSucc) {

.........

this._queue[MODULE_IDS].push(module);
this._queue[METHOD_IDS].push(method);
this._queue[PARAMS].push(params);

...........
}

可以看到它把对应的module，method和params push到了队列里面，然后就是等待java层的事件驱动。

java层的事件驱动其实也可以看成java层向js层的通信，最终会走到MessageQueue.js的callFunctionReturnFlushedQueue方法和invokeCallbackAndReturnFlushedQueue方法。

1
2
3
4
5
6
7
8

callFunctionReturnFlushedQueue(module, method, args) {
guard(() => {
  this.__callFunction(module, method, args);
  this.__callImmediates();
});

return this.flushedQueue();
}

调用了flushedQueue将MessageQueue中的所有数据通过C层发往java层。

到了java层以后，会回调到NativeModulesReactCallback类执行call方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private class NativeModulesReactCallback implements ReactCallback {

  @Override
  public void call(ExecutorToken executorToken, int moduleId, int methodId, ReadableNativeArray parameters) {
    mReactQueueConfiguration.getNativeModulesQueueThread().assertIsOnThread();

    synchronized (mJSToJavaCallsTeardownLock) {
      // Suppress any callbacks if destroyed - will only lead to sadness.
      if (mDestroyed) {
        return;
      }
      mJavaRegistry.call(CatalystInstanceImpl.this, executorToken, moduleId, methodId, parameters);
    }
  }
  .....
}

可以看到里面通过JavaRegistry调用了它的call方法。

1
2
3
4
5
6
7
8
9
10
11
12

/* package */ void call(
    CatalystInstance catalystInstance,
    ExecutorToken executorToken,
    int moduleId,
    int methodId,
    ReadableNativeArray parameters) {
  ModuleDefinition definition = mModuleTable.get(moduleId);
  if (definition == null) {
    throw new RuntimeException("Call to unknown module: " + moduleId);
  }
  definition.call(catalystInstance, executorToken, methodId, parameters);
}

拿到对应的module，调用call方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public void call(
      CatalystInstance catalystInstance,
      ExecutorToken executorToken,
      int methodId,
      ReadableNativeArray parameters) {
    MethodRegistration method = this.methods.get(methodId);
    Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, method.tracingName);
    try {
      this.methods.get(methodId).method.invoke(catalystInstance, executorToken, parameters);
    } finally {
      Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
    }
  }
}

其中根据methodId拿到对应module的方法，执行invoke。

最终执行的是BaseJavaModule的invoke方法。

1
2
3
4
5
6
7

@Override
public void invoke(CatalystInstance catalystInstance, ExecutorToken executorToken, ReadableNativeArray parameters) {

	.........
	mMethod.invoke(BaseJavaModule.this, mArguments);
	.........
}

通过反射调用最终的方法。

总结

这里我们重点要了解的就是js向java的通信靠的是事件驱动模式。

(1) JS将方法的对应参数push到MessageQueue中，等java端事件传递

(2) Java端事件触发以后，JS层将MessageQueue中的数据通过C层传递给java层

(3) C层调用一开始注册在其中的NativeModulesReactCallback

(4 然后通过JavaRegistry这个Java注册表拿到对应的module和method

(5) 通过反射执行方法。

涉及到的重要的类：

MessageQueue(JS层)，NativeModulesReactCallback，JavaRegistry。

JSCallJava

老规矩，通过图配合代码来理解流程。

重要类的作用

最后我们通过总结一下前面提到的几个重要的类的作用来加深印象。

ReactInstanceManager：它的作用是创建出ReactContext，CatalystInstance等类，解析package生成注册表，并且配合ReactRootView管理View的创建，生命周期等功能。

ReactContext：继承自ContextWrapper，是RN程序自己的上下文，我们可以通过getContext()去获得，里面有CatalystInstance实例，可以去获得Java和JS的module。

ReactRootView：RN程序的根视图，startReactApplication方法开启RN世界的大门。

CatalystInstance：Java端通信的管理类，提供通信的环境，方法和回调方法，内部通过ReactBridge进行通信。

ReactBridge：通信的核心类，通过jni的方式进行通信。

NativeModuleRegistry：Java接口的注册表。

JavascriptModuleRegistry：JS接口的注册表。

CoreModulePackage：RN核心框架的package，包括Java接口和js接口，前文提到的AppResgitry就是在这里面注册的。

MainReactPackage：RN帮我们封装的一些通用的Java组件和事件。

JsBundleLoader：用于加载JSBundle的类，其中会根据应用的情况创建不同的loader。

JSBundle：存有js核心逻辑，在release环境下要通过gradle任务去创建并且放在对应的目录下。

参考文章

深入源码探索 ReactNative 通信机制

WrQx99
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
ReactNative 通信机制（Android）
tongxintong的专栏
08-12 772
https://zhuanlan.zhihu.com/p/45837390先线上膝盖，网络上讲解最清晰的，没有之一，怕被删，故做收藏，另有作者专栏https://www.zhihu.com/column/react-native-tips 在介绍完RN的背景、实践以及整体架构后，下面我们来聊一聊RN Android端的源码。本文首先会介绍RN在Android端的初始化流程，紧接着介绍JSBundle的加载流程以及NativeModules的初始化过程，最后会介绍三端通信。 一、Android端的初始化.
react18 学习（二）
weixin_44812511的博客
09-28 265
Fiber的渲染方式，可以中断、暂停、恢复渲染
React核心源码解读 - 学习笔记
爱玲姐姐的博客
12-15 1926
《 1. 配置 React 源码本地调试环境 使用 create-react-app 脚手架创建项目 npx create-react-app react-test 弹射 create-react-app 脚手架内部配置 npm run eject 克隆 react 官方源码 (在项目的根目录下进行克隆) git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react 链接本地源码 /
react-native通信流程
爬不上树的小松鼠
10-17 1078
搭配着大神源码和文章，自己捋一遍RN的通信过程
React Native安卓实现分析之ReactInstanceManager的包装类ReactNativeHost
王亟亟的博客
11-13 3285
转载请注明出处：王亟亟的大牛之路 开篇之前日常安利 https://github.com/ddwhan0123/Useful-Open-Source-Android （各种库的收纳，长期维护） 上一篇提到了UI容器类ReactRootView，这一次继续我们的分析之路 写着一片之前，没有看过任何其他兄弟对相关内容的分析，不是觉得自己牛逼。 是怕别人的思维影响到我的理解，如果讲得不对，欢迎指出！ 上...
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
react-native-qrcode-svg：基于react-native-svg和node-qrcode的React Native QR码生成器
02-05
讨论： ： 产品特点轻松渲染QR码图像（可选）嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
react-native-iap：应用内购买的react-native本机模块
02-03
最近， react-native-iap模块维护得不好。 我们正在考虑再次参与并使模块更健康。 请参考并与我们分享您或您的组织如何使用它。 新年快乐 :party_popper: 介绍 此本地React模块将帮助您在Android ， iOS平台和Amazon...
react-native-action-button：用于react-native的可定制的多操作按钮组件
02-05
安装npm i react-native-action-button --save 通过以下方式将react-native-vector-icons本机依赖项链接到您的项目： react-native link react-native-vector-icons 要不就： react-native link 链接所有库与项目中...
React-Native与原生交互通信方式
11-28
React-Native与原生（Android）的三种交互通信方式
React Native 源码分析（二）—— Native Modules跨桥通信机制
薛瑄的博客
09-03 1387
本篇来分析一下，RN js和java的通信机制，在上一篇启动流程 看完后，通信的过程，你应该也能猜出个大概。具体过程，也是很简单 1、React Native 源码分析（一）—— 启动流程 2、React Native 源码分析（二）—— 通信机制 3、React Native 源码分析（三）—— UI渲染流程 4、React Native 源码分析（四）—— 任务调度 5、React Native 源码分析（五）—— 事件分发 一、 Java->JS 通信 先来一张图，看一下通信的整体过程 图片来源
React Native 启动流程 源码剖析
ZhangRui的博客
02-20 9207
开始之前   开始分析之前，新建一个名为 RnDemo 的空项目，RN 版本选择 0.58.1，查看项目自动为我们生成 MainActivity.java 和 MainApplication.java 文件，我们的分析就从这两个文件入手。 源码结构图   "react-native": "^0.58.1", "react": "^16.6.3", 系统框架图 源码剖析 1、MainApplic...
React Native--移动端开发的救星
FRMer的博客
02-15 309
  React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域   我作为一个搞了N年开...
浅析React之通信机制（一）
Kiven's Program Space
07-06 3734
自从Facebook提出了react之后，这个框架的关注度一直居高不下，它所引入的一些东西还是值得学习，比如组件化的开发方式，virtual dom的性能提升方式等，最近为了改进现有的跨平台方案也在研究react，在这边也做下相关的记录。 pre 在开始使用react之前我们需要搭建相应的环境，这个就不在探讨了，具体可以查看官方文档，由于react需要使用javascript语言，所以可能需要
React Native与Android通信交互
热门推荐
...
02-17 2万+
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 在前两篇的内容中，和大家分享了Android原生集成RN，以及RN的增量热更新。关于详细的内容，点击如下具体了解： Android App巧妙集成React Native最详教程 React Native 实现热部署、增量热更新 本篇内容同样和React Native 与 原生App有关，可...
React-Native学习十九：组件之间的通信-1
1024工场
09-02 9727
在编写React程序的时候，大家会遇到很多React组件之间的通信问题，主要分为以下3种： 1.父组件向子组件传值； 2.子组件向父组件传值； 3.没有任何嵌套的组件之间的传值（如兄弟组件之间传值）-后续章节介绍；
react-native 通信传值的三种方法
myuantao3286286的博客
10-29 3886
1.组件嵌套传值 通过状态机 state 进行传值 TextInput onChangeText={(phone) => this._changePhone(phone)} placeholder='请输入手机号' style={[styles.textInput , {marginBottom:20}]} autoCorr
React-Native 与原生的3种交互通信（Android）
asddavid的专栏
11-28 1万+
React-Native与原生（Android）的交互通信
react-native link react-native-pdf zsh: command not found: react-native
最新发布
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值