本文假設你已經有一定的React Native基礎，并且想要了解React Native的JS和原生代碼之間是如何交互的。
React Native的工作線程
-
shadow queue：布局在這個線程工作 -
main thread：UIKit在這里工作 -
Javascript thread：Js代碼在這里工作
另外每一個原生模塊都有自己的一個工作GCD queue，除非你明確指定它的工作隊列
*shadow queue*實際是一個GCD queue，而不是一個線程。
原生模塊
如果你還不知道如何創建原聲模塊，我建議你看看官方文檔。
下面是一個叫做Person的原生模塊，既可以被js調用，也可以調用js代碼。
@interface Person : NSObject <RCTBridgeModule>
@end
@implementation Logger
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(greet:(NSString *)name)
{
NSLog(@"Hi, %@!", name);
[_bridge.eventDispatcher sendAppEventWithName:@"greeted"
body:@{ @"name": name }];
}
@end
下面，我們主要看看代碼里用到的兩個宏定義：RCT_EXPORT_MODULE和RCT_EXPORT_METHOD?？纯此麄兪侨绾喂ぷ鞯?。
RCT_EXPORT_MODULE([js_name])
這個宏的功能就和它名字說的一樣，到處一個模塊。但是export是什么意思呢？它的意思是讓React Native的bridge（橋接）感知到原生模塊。
它的定義其實非常的簡單：
#define RCT_EXPORT_MODULE(js_name) \
RCT_EXTERN void RCTRegisterModule(Class); \
+ (NSString \*)moduleName { return @#js_name; } \
+ (void)load { RCTRegisterModule(self); }
它的作用：
- 首先它聲明了
RCTRegisterModule為extern方法，也就是說這個方法的實現在編譯的時候不可知，而在link的時候才可知。 - 聲明了一個方法
moduleName，這個方法返回可選的宏定義參數js_name，一般是你希望有一個專門的模塊名稱，而不是默認的ObjC類名的時候使用。 - 最后，聲明了一個
load方法（當app被加載進內存的時候，load方法也會被調用）。在這個方法里調用RCTRegisterModule方法來讓RN的bridge感知到這個模塊。
RCT_EXPORT_METHOD(method)
這個宏更有意思，它并給你的模塊添加任何實際的方法。它創建了一個新的方法，這個新的方法基本上是這樣的：
+ (NSArray *)__rct_export__120
{
return @[@"", @"log: (NSString *)message"];
}
這個被load方法生成的方法的名稱由前綴（__rct_export__）和一個可選的js_name（現在是空的）和聲明的行號（比如12）和__COUNTER__宏拼接在一起組成。
這個新生成的方法的作用就是返回一個數組，這個數組包含一個可選的js_name（在本例中是空的）和方法的簽名。簽名說的那一堆是為了避免方法崩潰。
即使是這么復雜的生成算法，如果你使用了*category*的話也難免會有兩個方法的名稱是一樣的。不過這個概率非常低，并且也不會產生什么不可控的行為。雖然Xcode會這么警告。
Runtime
這一步只做一件事，那就是給React Native的橋接模塊提供信息。這樣它就可以找到原生模塊里export出來的全部信息：modules和methods，而且這些全部發生在load的時候。
下圖是React Native橋接的依賴圖
初始化模塊
方法RCTRegisterModule方法就是用來把類添加到一個數組里，這樣React Native橋接器實例創建之后可以找到這個模塊。它會遍歷模塊數組，創建每個模塊的實例，并在橋接器里保存它的引用，并且每個模塊的實例也會保留橋接器的實例。并且該方法還會檢查模塊是否指定了運行的隊列，如果沒有指定那么就運行在一個新建的隊列上，與其他隊列分割。
NSMutableDictionary *modulesByName; // = ...
for (Class moduleClass in RCTGetModuleClasses()) {
// ...
module = [moduleClass new];
if ([module respondsToSelector:@selector(setBridge:)]) {
module.bridge = self;
}
modulesByName[moduleName] = module;
// ...
}
配置原生模塊
一旦在后臺線程里有了模塊實例，我們就列出每個模塊的全部方法，之后調用__rct_export__開始的方法，這樣我們就有一個該方法簽名的字符串。這樣我們后續就可以獲得參數的實際類型。在運行時，我們只會知道參數的類型是id，按照上面的方法就可以獲得參數的實際類型，比如本例的是NSString*。
unsigned int methodCount;
Method *methods = class_copyMethodList(moduleClass, &methodCount);
for (unsigned int i = 0; i < methodCount; i++) {
Method method = methods[i];
SEL selector = method_getName(method);
if ([NSStringFromSelector(selector) hasPrefix:@"__rct_export__"]) {
IMP imp = method_getImplementation(method);
NSArray *entries = ((NSArray *(*)(id, SEL))imp)(_moduleClass, selector);
//...
[moduleMethods addObject:/* Object representing the method */];
}
}
初始化Javascript執行器
JavaScript執行器有一個setUp方法。用這個方法可以執行很多耗費資源的任務，比如在后臺線程里初始化JavaScriptCore。由于只有active的執行器才可以接受到setUp的調用，所以也節約了很多的資源。
JSGlobalContextRef ctx = JSGlobalContextCreate(NULL);
_context = [[RCTJavaScriptContext alloc] initWithJSContext:ctx];
注入Json配置
模塊的配置都是Json形式的，如：
{
"remoteModuleConfig": {
"Logger": {
"constants": { /* If we had exported constants... */ },
"moduleID": 1,
"methods": {
"requestPermissions": {
"type": "remote",
"methodID": 1
}
}
}
}
}
這些都作為全局變量存儲在JavaScript VM里，因此當橋接器的Js側代碼初始化完畢的時候它可以用這些信息來創建原生模塊。
加載JavaScript代碼
可以獲得代碼的地方只有兩個，在開發的時候從packager下載代碼，在產品環境下從磁盤加載代碼。
執行JavaScript代碼
一旦所有的準備工作就緒，我們就可以把App的代碼都加載到JavaScript Core里解析，執行。在最開始執行的時候，所有的CommonJS模塊都會被注冊（現在你寫的是ES6的模塊，不是CommonJS，但是最后會轉碼為ES5），并require入口文件。
JSValueRef jsError = NULL;
JSStringRef execJSString = JSStringCreateWithCFString((__bridge CFStringRef)script);
JSStringRef jsURL = JSStringCreateWithCFString((__bridge CFStringRef)sourceURL.absoluteString);
JSValueRef result = JSEvaluateScript(strongSelf->_context.ctx, execJSString, NULL, jsURL, 0, &jsError);
JSStringRelease(jsURL);
JSStringRelease(execJSString);
JavaScript模塊
這個時候，上例中的原生模塊就可以在NativeModules對象里調用了。
var { NativeModules } = require('react-native');
var { Person } = NativeModules;
Person.greet('Tadeu');
當你調用一個原生模塊的方法的時候，它會在一個隊列里執行。其中包含模塊名、方法名和調用這個方法需要的全部參數。在JavaScript執行結束的時候原生代碼繼續執行。
調用周期
下面看看如果我們調用上面的代碼會發生什么：
代碼的調用從Js開始，之后開始原生代碼的執行。Js傳入的回調會通過橋接器（原生模塊使用_bridge實例調用enqueueJSCall:args:）傳回到JS代碼。
注意：你如果看過文檔，或者親自實踐過的話你就會知道也有從原生模塊調用JS的情況。這個是用vSYNC實現的。但是這些為了改善啟動時間被刪除了。
參數類型
從原生調用JS的情況更簡單一些，參數是做為JSON例的一個數組傳遞的。但是從JS到原生的調用里，我們需要原生的類型。但是，如上文所述，對于類的對象（結構體的對象），運行時并不能通過NSMethodSignature給我們足夠的信息，我們只有字符串類型。
我們使用正則表達式從方法的簽名里提取類型，然后我們使用RCTConvert工具類來實際轉化參數的類型。這個工具類會把JSON里的數據轉化成我們需要的類型。
我們使用objc_msgSend來動態調用方法。如果是struct的話，則使用NSInvocation來調用。
一旦我們得到了全部參數的類型，我們使用另外一個NSInvocation來調用目標模塊的方法，并傳入全部的參數。比如：
// If you had the following method in a given module, e.g. `MyModule`
RCT_EXPORT_METHOD(methodWithArray:(NSArray *) size:(CGRect)size) {}
// And called it from JS, like:
require('NativeModules').MyModule.method(['a', 1], {
x: 0,
y: 0,
width: 200,
height: 100
});
// The JS queue sent to native would then look like the following:
// ** Remember that it's a queue of calls, so all the fields are arrays **
@[
@[ @0 ], // module IDs
@[ @1 ], // method IDs
@[ // arguments
@[
@[@"a", @1],
@{ @"x": @0, @"y": @0, @"width": @200, @"height": @100 }
]
]
];
// This would convert into the following calls (pseudo code)
NSInvocation call
call[args][0] = GetModuleForId(@0)
call[args][1] = GetMethodForId(@1)
call[args][2] = obj_msgSend(RCTConvert, NSArray, @[@"a", @1])
call[args][3] = NSInvocation(RCTConvert, CGRect, @{ @"x": @0, ... })
call()
線程
默認情況下，每一個模塊都有自己的GCD queue。除非在模塊中通過-methodQueue方法指定模塊要運行的隊列。有一個例外是View Managers（就是繼承了RCTViewManager）的類，會默認運行在Shadow Queue里。
目前的線程規則是這樣的：
-
-init和-setBridge:保證會在main thread里執行 - 所有導出的方法都會在目標隊列里執行
- 如果你實現了
RCTInvalidating協議，invalidate也會在目標隊列里執行 -
-dealloc方法在哪個線程執行被調用
當JS執行一堆的方法之后，這些方法會根據目標隊列分組，之后被并行分發：
// group `calls` by `queue` in `buckets`
for (id queue in buckets) {
dispatch_block_t block = ^{
NSOrderedSet *calls = [buckets objectForKey:queue];
for (NSNumber *indexObj in calls) {
// Actually call
}
};
if (queue == RCTJSThread) {
[_javaScriptExecutor executeBlockOnJavaScriptQueue:block];
} else if (queue) {
dispatch_async(queue, block);
}
}
總結
本文還只是對橋接器如何工作的一個簡單描述。希望對各位能有所幫助。
