【React Native for Android】jsBridge实现原理

2017-02-28注: RN已经将大部分的Bridge部分迁移到c++实现(参考1a690d5),本篇文章的参考价值较低。后续有空再进行新的分析吧。
基于源码版本:0.28

简单整理了一下几个组件之间的关系,放在前面:

rn-bridge

1.JSBridge初始化过程

React Native for Android(RN4A)的核心流程在QZone的框架启动核心路径剖析一文中讲述得很详细,本文不再赘述,主要解析RN4A里面的Native&JS通信机制。

注:Java在RN4A中是Native模块,涉及JNI的部分在java中术语为native,注意大小写的区分不要混淆。

ReactInstanceManager初始化时会创建ReactContext,其中主要的一部分工作就是注册Native&js模块,我们看看它都做了什么:

1.1 模块注册

createReactContext()中会先注册CoreModulesPackage的Native&JS模块与所有的ViewManager,之后注册在ReactNativeHost中(0.28之前的版本在ReactActivity中)声明的所有其他ReactPackage的Native&JS模块,其中:

  • Native模块注册
    将所有的NativeModule添加进NativeModuleRegistry.Builder后,它会依次build每一个NativeModule,主要做的事情就是生成moduleID、解析带@ReactMethod注解的方法;
  • JavaScript模块注册
    1. 在js层,js模块在写的时候都需要加上BatchedBridge.registerCallableModule('module', Module);注册到BatchedBridge.js中以供后续查找;
    2. 在java层,js模块将想要暴露出来的方法声明为一个接口类,它被build的时候利用Java动态代理生成实例, 具体的方法invoke由CatalystInstance.callFunction代理执行。

注册完后,会初始化CatalystInstance, 模块注册、build生成后的NativeModuleRegistryJavaScriptModuleRegistry都由CatalystInstance持有.

1.2 初始化ReactBridge

CatalystInstance初始化时会初始化ReactBridgeReactBridge是在Java层与js沟通的桥梁(废话..),它是一个native类,大部分实现位于Bridge.h/.cpp,在初始化时调用的native initialize()方法对应OnLoad.cpp中的create函数,它的需要三个参数:

  • JavaScriptExecutor
    RN4A使用WebKit的JavaScriptCore(JSCore)来解析js, JavaScriptExecutor的实现类JSCJavaScriptExecutor是一个native类,它封装了JSCore的逻辑(对应JSCExecutor.h/.cpp)。
  • ReactCallback
    为JavaScript提供Java module执行入口。
  • MessageQueueThread
    包装着Java模块执行的线程Handler。 注: RN4A里面有三个主要执行线程:UI线程, JS线程, Java线程.

我们看一下它的初始化过程:

1
2
3
4
5
6
7
8
9
10
static void create(JNIEnv* env, jobject obj, jobject executor, jobject callback,
jobject callbackQueueThread) {
auto weakCallback = createNew<WeakReference>(callback);
auto weakCallbackQueueThread = createNew<WeakReference>(callbackQueueThread);
auto bridgeCallback = folly::make_unique<PlatformBridgeCallback>(weakCallback, weakCallbackQueueThread);
auto nativeExecutorFactory = extractRefPtr<CountableJSExecutorFactory>(env, executor);
auto executorTokenFactory = folly::make_unique<JExecutorTokenFactory>();
auto bridge = createNew<CountableBridge>(nativeExecutorFactory.get(), std::move(executorTokenFactory), std::move(bridgeCallback));
setCountableForJava(env, obj, std::move(bridge));
}

实际上做的工作也不多,就是一堆封装,最后生成了一个继承CountableBridge实例,继承Countable的对象的内存是由native分配的,也由native回收。

CatalystInstance初始化完ReactBridge后, 创建NativeModuleRegistry的JSON至并放在javascript的全局变量global.__fbBatchedBridgeConfig中:

1
2
3
bridge.setGlobalVariable(
"__fbBatchedBridgeConfig",
buildModulesConfigJSONProperty(mJavaRegistry));

buildModulesConfigJSONProperty函数中我们可以看出Native模块打包出的json数据结构大概为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
remoteModuleConfig: {
moduleName : {
moduleId: 0,
supportsWebWorkers: false,
methods: {
methodName : {
methodId: 0,
methodType: remote
}
// other methods ...
},
constants: {
constant1: 123,
constant2: 234
}
},
// other modules ...
}

这里的bridge.setGlobalVariable最后到JSCExecutor.setGlobalVariable中,通过JavaScriptCore::JSObjectSetProperty实现。

JS加载Java模块

在Java模块被封装好注入到gloabl.__fbBatchedBridgeConfig后,js需要进行一些处理,这里有三个模块需要注意:NativeModule.js, BatchedBridge.js, MessageQueue.js,我们来看看RN4A是怎么一步步载入Native模块的:

  1. js模块中我们都会require('react-native')这样(或者ES6的import xxx from ('react-native')),此时加载的react-native.js模块中,会加载NativeModule.js模块,NativeModule.js又会去加载BatchedBridge.js,在这里解析之前传入的global.__fbBatchedBridgeConfig;

  2. BatchedBridge.js里面封装了MessageQueue的一个实例,它将global.__fbBatchedBridgeConfig传给了MessageQueue的构造函数,我们看看构造函数里对它干了什么:

1
2
3
4
5
6
7
8
9
lazyProperty(this, 'RemoteModules', () => {
const {remoteModuleConfig} = configProvider();
const modulesConfig = this._genModulesConfig(remoteModuleConfig);
const modules = this._genModules(modulesConfig);
//生成调试用的Native module/method查找表
return modules;
});

这段代码还算浅显易懂,它定义了一个RemoteModules属性,其中将模块、方法、常量什么的解析为js可用的变量、函数。lazyProperty函数实际上就是Object.defineProperty函数里面对property指定get(),不直接初始化。

再加上之前所说的,需要暴露给java的JS模块都会调用BatchedBridge.registerCallableModule来注册自己,最后也会跑到MessageQueue里面,这样一来,所有的Native&JS模块入口都集中在了MessageQueue里面。BatchedBridge最后将自己定义为了一个全局变量,方便JSCore直接找到它:

1
Object.defineProperty(global, '__fbBatchedBridge', { value: BatchedBridge });
  1. 加载好BatchedBridge.js后,回到NativeModule.js, 它BatchedBridge.RemoteModules又做了一点处理:
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
const NativeModules = {};
Object.keys(RemoteModules).forEach((moduleName) => {
Object.defineProperty(NativeModules, moduleName, {
configurable: true,
enumerable: true,
get: () => {
let module = RemoteModules[moduleName];
//IOS用,如果注入了nativeRequireModuleConfig方法,则由它生成moduleConfig
if (module && typeof module.moduleID === 'number' && global.nativeRequireModuleConfig) {
const json = global.nativeRequireModuleConfig(moduleName);
const config = json && JSON.parse(json);
module = config && BatchedBridge.processModuleConfig(config, module.moduleID);
RemoteModules[moduleName] = module;
}
//将每个生成的module结构定义为自己的变量
Object.defineProperty(NativeModules, moduleName, {
configurable: true,
enumerable: true,
value: module,
});
return module;
},
});
});

于是我们就会看到RN4A官方文档上所说的,如果你定义了一个Native模块,需要额外加一个文件,声明如下信息:

1
2
import { NativeModules } from 'react-native';
module.exports = NativeModules.YourNativeModule;

这下就明白了,因为所有Native的模块都会在加载的时候注册到NativeModules里面。

Java执行JS

上面说到所有的JavaScript模块的方法都通过动态代理交给CatalystInstance.callFunction来执行,那么具体是怎么被执行的呢,我们来看看

jsbridge

JSCExecutor.cpp这一层,它会生成JS调用gloabl.__fbBatchedBridge.callFunctionReturnFlushedQueue.apply(null, [module, method, args])交由JavascriptCore来执行。结合上文分析,这个gloabl.__fbBatchedBridge就是MessageQueue

MessageQueue.callFunctionReturnFlushedQueue里面直接调用了__callFunction()函数,我们看看它是怎么找JS模块执行的:

1
2
3
4
5
6
7
__callFunction(module: string, method: string, args: any) {
//标记时间, 开始systrace
const moduleMethods = this._callableModules[module];
//检查module合法性
moduleMethods[method].apply(moduleMethods, args);
//结束systrace
}

this._callableModules里面就存放了所有由BatchedBridge.registerCallableModule注册上来的java模块,然后再找对应方法执行即可。

关于js如何执行java的,请看下文分解吧。大头鬼的ReactNativeAndroid源码分析-Js如何调用Native的代码写这块很不错,大家也可以作为参考。


由于RN只是一个View层的框架,还需要配合Flux或者Redux才能进行项目开发,并且JSX这样的语法与往常的Web、Native开发语法习惯都比较不同,它的学习曲线非常高。我写了一个配合Flow&ES6的todo-example,可以供初学者学习:)

参考文章: