碼上快樂

相關內容    簡體    繁體

其實沒那么復雜！探究react-native通信機制

本文轉載自   查看原文   2016-06-28 15:03   8147    android進階

近段時間來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任務去創建並且放在對應的目錄下。

勘誤

不好意思各位！！這里由於本人粗心的原因，代碼沒看全，有一個地方出錯了，這里寫一個勘誤，如果造成了大家的困擾我再次說一聲不好意思！

前面我說過，JS調Java的機制是［JS把對應的moduleId,methodId和params push到queue中，等待native調用js，然后把MessageQueue中的數據發送到C層再通過jni轉到java層］。但是今天公司里的大神在和我們討論RN的時候糾正了我的這個錯誤。

我們一起看一下MessageQueue.js的__nativeCall方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
__nativeCall(module, method, params, onFail, onSucc) {

 ..............

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

 var now = new Date().getTime();
 if (global.nativeFlushQueueImmediate &&
 now - this._lastFlush >= MIN_TIME_BETWEEN_FLUSHES_MS) {
 global.nativeFlushQueueImmediate(this._queue);
 this._queue = [[], [], [], this._callID];
 this._lastFlush = now;
 }
 Systrace.counterEvent('pending_js_to_native_queue', this._queue[0].length);
 if (__DEV__ && SPY_MODE && isFinite(module)) {
 console.log('JS->N : ' + this._remoteModuleTable[module] + '.' +
 this._remoteMethodTable[module][method] + '(' + JSON.stringify(params) + ')');
 }
}

之前的文章只分析了前面的三個queue.push，但是大家可以看一下后面的一段：

1
2
3
4
5
6
7
 
var now = new Date().getTime();
if (global.nativeFlushQueueImmediate &&
 now - this._lastFlush >= MIN_TIME_BETWEEN_FLUSHES_MS) {
 global.nativeFlushQueueImmediate(this._queue);
 this._queue = [[], [], [], this._callID];
 this._lastFlush = now;
}

它會去判斷兩次調用的時差，如果大於MIN_TIME_BETWEEN_FLUSHES_MS(5ms)的話，會調用global.nativeFlushQueueImmediate(this._queue);這個方法去主動把數據傳遞到C層的。也就是說，如果你兩次的通信時間很短，小於5ms了，那就和我之前講的一樣，但是如果大於5ms，RN在JS端會主動傳遞數據的，這里一定要注意了！！

 

官方文檔：

　　　　http://wiki.jikexueyuan.com/project/react-native/

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 react-native入門 [react-native]react-native填坑筆記 react-native 之ScrollView的使用 vscode 搭建react-native react-native開發經驗 react-native中的TextInput react-native調試方法 React-Native 之 TextInput使用 react-native StatusBar透明 react-native 布局基礎
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM