本文假設(shè)你已經(jīng)有一定的React Native基礎(chǔ)傻挂，并且想要了解React Native的JS和原生代碼之間是如何交互的夫偶。

React Native的工作線程

• shadow queue：布局在這個(gè)線程工作
• main thread：UIKit在這里工作
• Javascript thread：Js代碼在這里工作

另外每一個(gè)原生模塊都有自己的一個(gè)工作GCD queue吴超，除非你明確指定它的工作隊(duì)列

*shadow queue*實(shí)際是一個(gè)GCD queue破停，而不是一個(gè)線程杯巨。

原生模塊

如果你還不知道如何創(chuàng)建原聲模塊每聪，我建議你看看官方文檔泣矛。

下面是一個(gè)叫做Person的原生模塊躺坟，既可以被js調(diào)用，也可以調(diào)用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

下面咪橙，我們主要看看代碼里用到的兩個(gè)宏定義：RCT_EXPORT_MODULE和RCT_EXPORT_METHOD⌒榈梗看看他們是如何工作的美侦。

RCT_EXPORT_MODULE([js_name])

這個(gè)宏的功能就和它名字說的一樣，到處一個(gè)模塊魂奥。但是export是什么意思呢菠剩？它的意思是讓React Native的bridge（橋接）感知到原生模塊。

它的定義其實(shí)非常的簡單：

#define RCT_EXPORT_MODULE(js_name) \
  RCT_EXTERN void RCTRegisterModule(Class); \
  + (NSString \*)moduleName { return @#js_name; } \
  + (void)load { RCTRegisterModule(self); }

它的作用：

• 首先它聲明了RCTRegisterModule為extern方法耻煤，也就是說這個(gè)方法的實(shí)現(xiàn)在編譯的時(shí)候不可知具壮，而在link的時(shí)候才可知。
• 聲明了一個(gè)方法moduleName哈蝇，這個(gè)方法返回可選的宏定義參數(shù)js_name棺妓，一般是你希望有一個(gè)專門的模塊名稱，而不是默認(rèn)的ObjC類名的時(shí)候使用炮赦。
• 最后怜跑，聲明了一個(gè)load方法（當(dāng)app被加載進(jìn)內(nèi)存的時(shí)候，load方法也會被調(diào)用）吠勘。在這個(gè)方法里調(diào)用RCTRegisterModule方法來讓RN的bridge感知到這個(gè)模塊性芬。

RCT_EXPORT_METHOD(method)

這個(gè)宏更有意思，它并給你的模塊添加任何實(shí)際的方法剧防。它創(chuàng)建了一個(gè)新的方法植锉，這個(gè)新的方法基本上是這樣的：

+ (NSArray *)__rct_export__120
{
    return @[@"", @"log: (NSString *)message"];
}

這個(gè)被load方法生成的方法的名稱由前綴（__rct_export__）和一個(gè)可選的js_name（現(xiàn)在是空的）和聲明的行號（比如12）和__COUNTER__宏拼接在一起組成。

這個(gè)新生成的方法的作用就是返回一個(gè)數(shù)組峭拘，這個(gè)數(shù)組包含一個(gè)可選的js_name（在本例中是空的）和方法的簽名俊庇。簽名說的那一堆是為了避免方法崩潰狮暑。

即使是這么復(fù)雜的生成算法，如果你使用了*category*的話也難免會有兩個(gè)方法的名稱是一樣的暇赤。不過這個(gè)概率非常低心例，并且也不會產(chǎn)生什么不可控的行為。雖然Xcode會這么警告鞋囊。

Runtime

這一步只做一件事止后，那就是給React Native的橋接模塊提供信息。這樣它就可以找到原生模塊里export出來的全部信息：modules和methods溜腐，而且這些全部發(fā)生在load的時(shí)候译株。

下圖是React Native橋接的依賴圖

初始化模塊

方法RCTRegisterModule方法就是用來把類添加到一個(gè)數(shù)組里，這樣React Native橋接器實(shí)例創(chuàng)建之后可以找到這個(gè)模塊挺益。它會遍歷模塊數(shù)組歉糜，創(chuàng)建每個(gè)模塊的實(shí)例，并在橋接器里保存它的引用望众，并且每個(gè)模塊的實(shí)例也會保留橋接器的實(shí)例匪补。并且該方法還會檢查模塊是否指定了運(yùn)行的隊(duì)列，如果沒有指定那么就運(yùn)行在一個(gè)新建的隊(duì)列上烂翰，與其他隊(duì)列分割夯缺。

NSMutableDictionary *modulesByName; // = ...
for (Class moduleClass in RCTGetModuleClasses()) {
  // ...
  module = [moduleClass new];
  if ([module respondsToSelector:@selector(setBridge:)]) {
    module.bridge = self;
  }
  modulesByName[moduleName] = module;
  // ...
}

配置原生模塊

一旦在后臺線程里有了模塊實(shí)例，我們就列出每個(gè)模塊的全部方法甘耿，之后調(diào)用__rct_export__開始的方法踊兜，這樣我們就有一個(gè)該方法簽名的字符串。這樣我們后續(xù)就可以獲得參數(shù)的實(shí)際類型佳恬。在運(yùn)行時(shí)捏境，我們只會知道參數(shù)的類型是id，按照上面的方法就可以獲得參數(shù)的實(shí)際類型毁葱，比如本例的是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執(zhí)行器

JavaScript執(zhí)行器有一個(gè)setUp方法。用這個(gè)方法可以執(zhí)行很多耗費(fèi)資源的任務(wù)头谜，比如在后臺線程里初始化JavaScriptCore骏掀。由于只有active的執(zhí)行器才可以接受到setUp的調(diào)用，所以也節(jié)約了很多的資源柱告。

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里笑陈，因此當(dāng)橋接器的Js側(cè)代碼初始化完畢的時(shí)候它可以用這些信息來創(chuàng)建原生模塊际度。

加載JavaScript代碼

可以獲得代碼的地方只有兩個(gè)，在開發(fā)的時(shí)候從packager下載代碼涵妥，在產(chǎn)品環(huán)境下從磁盤加載代碼乖菱。

執(zhí)行JavaScript代碼

一旦所有的準(zhǔn)備工作就緒，我們就可以把App的代碼都加載到JavaScript Core里解析，執(zhí)行窒所。在最開始執(zhí)行的時(shí)候鹉勒，所有的CommonJS模塊都會被注冊（現(xiàn)在你寫的是ES6的模塊，不是CommonJS吵取，但是最后會轉(zhuǎn)碼為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模塊

這個(gè)時(shí)候皮官，上例中的原生模塊就可以在NativeModules對象里調(diào)用了脯倒。

var { NativeModules } = require('react-native');
var { Person } = NativeModules;

Person.greet('Tadeu');

當(dāng)你調(diào)用一個(gè)原生模塊的方法的時(shí)候，它會在一個(gè)隊(duì)列里執(zhí)行捺氢。其中包含模塊名藻丢、方法名和調(diào)用這個(gè)方法需要的全部參數(shù)。在JavaScript執(zhí)行結(jié)束的時(shí)候原生代碼繼續(xù)執(zhí)行摄乒。

調(diào)用周期

下面看看如果我們調(diào)用上面的代碼會發(fā)生什么：

代碼的調(diào)用從Js開始悠反，之后開始原生代碼的執(zhí)行。Js傳入的回調(diào)會通過橋接器（原生模塊使用_bridge實(shí)例調(diào)用enqueueJSCall:args:）傳回到JS代碼馍佑。

注意：你如果看過文檔斋否，或者親自實(shí)踐過的話你就會知道也有從原生模塊調(diào)用JS的情況。這個(gè)是用vSYNC實(shí)現(xiàn)的挤茄。但是這些為了改善啟動時(shí)間被刪除了如叼。

參數(shù)類型

從原生調(diào)用JS的情況更簡單一些，參數(shù)是做為JSON例的一個(gè)數(shù)組傳遞的穷劈。但是從JS到原生的調(diào)用里笼恰，我們需要原生的類型。但是歇终，如上文所述社证，對于類的對象（結(jié)構(gòu)體的對象），運(yùn)行時(shí)并不能通過NSMethodSignature給我們足夠的信息评凝，我們只有字符串類型追葡。

我們使用正則表達(dá)式從方法的簽名里提取類型，然后我們使用RCTConvert工具類來實(shí)際轉(zhuǎn)化參數(shù)的類型奕短。這個(gè)工具類會把JSON里的數(shù)據(jù)轉(zhuǎn)化成我們需要的類型宜肉。

我們使用objc_msgSend來動態(tài)調(diào)用方法。如果是struct的話翎碑，則使用NSInvocation來調(diào)用谬返。

一旦我們得到了全部參數(shù)的類型，我們使用另外一個(gè)NSInvocation來調(diào)用目標(biāo)模塊的方法日杈，并傳入全部的參數(shù)遣铝。比如：

// 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()

線程

默認(rèn)情況下佑刷，每一個(gè)模塊都有自己的GCD queue。除非在模塊中通過-methodQueue方法指定模塊要運(yùn)行的隊(duì)列酿炸。有一個(gè)例外是View Managers（就是繼承了RCTViewManager）的類瘫絮，會默認(rèn)運(yùn)行在Shadow Queue里。

目前的線程規(guī)則是這樣的：

• -init和-setBridge:保證會在main thread里執(zhí)行
• 所有導(dǎo)出的方法都會在目標(biāo)隊(duì)列里執(zhí)行
• 如果你實(shí)現(xiàn)了RCTInvalidating協(xié)議填硕，invalidate也會在目標(biāo)隊(duì)列里執(zhí)行
• -dealloc方法在哪個(gè)線程執(zhí)行被調(diào)用

當(dāng)JS執(zhí)行一堆的方法之后麦萤，這些方法會根據(jù)目標(biāo)隊(duì)列分組，之后被并行分發(fā)：

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

總結(jié)

本文還只是對橋接器如何工作的一個(gè)簡單描述廷支。希望對各位能有所幫助频鉴。

原文：https://tadeuzagallo.com/blog/react-native-bridge/