React Native是facebook剛開源的框架枯怖，可以用javascript直接開發(fā)原生APP唐片，先不說這個框架后續(xù)是否能得到大眾認(rèn)可厚柳，單從源碼來說抛寝，這個框架源碼里有非常多的設(shè)計(jì)思想和實(shí)現(xiàn)方式值得學(xué)習(xí)熊杨，本篇先來看看它最基礎(chǔ)的JavaScript-ObjectC通信機(jī)制(以下簡稱JS/OC)曙旭。
概覽
React Native用iOS自帶的JavaScriptCore作為JS的解析引擎，但并沒有用到JavaScriptCore提供的一些可以讓JS與OC互調(diào)的特性晶府，而是自己實(shí)現(xiàn)了一套機(jī)制桂躏，這套機(jī)制可以通用于所有JS引擎上，在沒有JavaScriptCore的情況下也可以用webview代替川陆，實(shí)際上項(xiàng)目里就已經(jīng)有了用webview作為解析引擎的實(shí)現(xiàn)剂习，應(yīng)該是用于兼容iOS7以下沒有JavascriptCore的版本。
普通的JS-OC通信實(shí)際上很簡單较沪，OC向JS傳信息有現(xiàn)成的接口进倍，像webview提供的-stringByEvaluatingJavaScriptFromString方法可以直接在當(dāng)前context上執(zhí)行一段JS腳本，并且可以獲取執(zhí)行后的返回值购对，這個返回值就相當(dāng)于JS向OC傳遞信息猾昆。React Native也是以此為基礎(chǔ)，通過各種手段骡苞，實(shí)現(xiàn)了在OC定義一個模塊方法垂蜗，JS可以直接調(diào)用這個模塊方法并還可以無縫銜接回調(diào)。
舉個例子解幽，OC定義了一個模塊RCTSQLManager贴见，里面有個方法-query:successCallback:，JS可以直接調(diào)用RCTSQLManager.query并通過回調(diào)獲取執(zhí)行結(jié)果
@implement RCTSQLManager
- (void)query:(NSString *)queryData successCallback:(RCTResponseSenderBlOCk)responseSender
{
RCT_EXPORT();
NSString *ret = @"ret"
responseSender(ret);
}
@end
//JS:
RCTSQLManager.query("SELECT * FROM table", function(result) {
//result == "ret";
});
接下來看看它是怎樣實(shí)現(xiàn)的躲株。
模塊配置表
首先OC要告訴JS它有什么模塊片部，模塊里有什么方法，JS才知道有這些方法后才有可能去調(diào)用這些方法霜定。這里的實(shí)現(xiàn)是OC生成一份模塊配置表傳給JS档悠，配置表里包括了所有模塊和模塊里方法的信息。例：
{
"remoteModuleConfig": {
"RCTSQLManager": {
"methods": {
"query": {
"type": "remote",
"methodID": 0
}
},
"moduleID": 4
},
...
},
}
OC端和JS端分別各有一個bridge望浩，兩個bridge都保存了同樣一份模塊配置表辖所，JS調(diào)用OC模塊方法時，通過bridge里的配置表把模塊方法轉(zhuǎn)為模塊ID和方法ID傳給OC磨德，OC通過bridge的模塊配置表找到對應(yīng)的方法執(zhí)行之缘回，以上述代碼為例，流程大概是這樣（先不考慮callback）：
在了解這個調(diào)用流程之前典挑，我們先來看看OC的模塊配置表式怎么來的酥宴。我們在新建一個OC模塊時，JS和OC都不需要為新的模塊手動去某個地方添加一些配置您觉，模塊配置表是自動生成的拙寡，只要項(xiàng)目里有一個模塊，就會把這個模塊加到配置表上顾犹，那這個模塊配置表是怎樣自動生成的呢倒庵？分兩個步驟：
1.取所有模塊類
每個模塊類都實(shí)現(xiàn)了RCTBridgeModule接口褒墨，可以通過runtime接口objc_getClassList或objc_copyClassList取出項(xiàng)目里所有類，然后逐個判斷是否實(shí)現(xiàn)了RCTBridgeModule接口擎宝，就可以找到所有模塊類郁妈，實(shí)現(xiàn)在RCTBridgeModuleClassesByModuleID()方法里。
2.取模塊里暴露給JS的方法
一個模塊里可以有很多方法绍申，一些是可以暴露給JS直接調(diào)用的噩咪，一些是私有的不想暴露給JS，怎樣做到提取這些暴露的方法呢极阅？我能想到的方法是對要暴露的方法名制定一些規(guī)則胃碾，比如用RCTExport_作為前綴，然后用runtime方法class_getInstanceMethod取出所有方法名字筋搏，提取以RCTExport_為前綴的方法仆百，但這樣做惡心的地方是每個方法必須加前綴。React Native用了另一種黑魔法似的方法解決這個問題：編譯屬性attribute奔脐。
在上述例子中我們看到模塊方法里有句代碼：RCT_EXPORT()俄周，模塊里的方法加上這個宏就可以實(shí)現(xiàn)暴露給JS，無需其他規(guī)則髓迎，那這個宏做了什么呢峦朗？來看看它的定義：
#define RCT_EXPORT(JS_name) __attribute__((used, section("__DATA,RCTExport" \
))) static const char *__rct_export_entry__[] = { __func__, #JS_name }
這個宏的作用是用編譯屬性attribute給二進(jìn)制文件新建一個section，屬于__DATA數(shù)據(jù)段排龄，名字為RCTExport波势，并在這個段里加入當(dāng)前方法名。編譯器在編譯時會找到attribute進(jìn)行處理橄维，為生成的可執(zhí)行文件加入相應(yīng)的內(nèi)容尺铣。效果可以從linkmap看出來：
# Sections:
# Address Size Segment Section
0x100001670 0x000C0180 __TEXT __text
...
0x10011EFA0 0x00000330 __DATA RCTExport
0x10011F2D0 0x00000010 __DATA __common
0x10011F2E0 0x000003B8 __DATA __bss
...
0x10011EFA0 0x00000010 [ 4] -[RCTStatusBarManager setStyle:animated:].__rct_export_entry__
0x10011EFB0 0x00000010 [ 4] -[RCTStatusBarManager setHidden:withAnimation:].__rct_export_entry__
0x10011EFC0 0x00000010 [ 5] -[RCTSourceCode getScriptText:failureCallback:].__rct_export_entry__
0x10011EFD0 0x00000010 [ 7] -[RCTAlertManager alertWithArgs:callback:].__rct_export_entry__
...
可以看到可執(zhí)行文件數(shù)據(jù)段多了個RCTExport段，內(nèi)容就是各個要暴露給JS的方法挣郭。這些內(nèi)容是可以在運(yùn)行時獲取到的迄埃，在RCTBridge.m的RCTExportedMethodsByModuleID()方法里獲取這些內(nèi)容，提取每個方法的類名和方法名兑障，就完成了提取模塊里暴露給JS方法的工作。
整體的模塊類/方法提取實(shí)現(xiàn)在RCTRemoteModulesConfig()方法里蕉汪。
調(diào)用流程
接下來看看JS調(diào)用OC模塊方法的詳細(xì)流程流译，包括callback回調(diào)。這時需要細(xì)化一下上述的調(diào)用流程圖：
看起來有點(diǎn)復(fù)雜者疤，不過一步步說明福澡，應(yīng)該很容易弄清楚整個流程窄刘，圖中每個流程都標(biāo)了序號晋被，從發(fā)起調(diào)用到執(zhí)行回調(diào)總共有11個步驟，詳細(xì)說明下這些步驟：
1.JS端調(diào)用某個OC模塊暴露出來的方法。
2.把上一步的調(diào)用分解為ModuleName,MethodName,arguments拉宗，再扔給MessageQueue處理。
在初始化時模塊配置表上的每一個模塊都生成了對應(yīng)的remoteModule對象污筷，對象里也生成了跟模塊配置表里一一對應(yīng)的方法证薇，這些方法里可以拿到自身的模塊名，方法名效拭，并對callback進(jìn)行一些處理暂吉，再移交給MessageQueue。具體實(shí)現(xiàn)在BatchedBridgeFactory.js的_createBridgedModule里缎患，整個實(shí)現(xiàn)區(qū)區(qū)24行代碼慕的，感受下JS的魔力吧。
3.在這一步把JS的callback函數(shù)緩存在MessageQueue的一個成員變量里挤渔，用CallbackID代表callback肮街。在通過保存在MessageQueue的模塊配置表把上一步傳進(jìn)來的ModuleName和MethodName轉(zhuǎn)為ModuleID和MethodID。
4.把上述步驟得到的ModuleID,MethodId,CallbackID和其他參數(shù)argus傳給OC判导。至于具體是怎么傳的低散，后面再說。
5.OC接收到消息骡楼，通過模塊配置表拿到對應(yīng)的模塊和方法熔号。
實(shí)際上模塊配置表已經(jīng)經(jīng)過處理了，跟JS一樣鸟整，在初始化時OC也對模塊配置表上的每一個模塊生成了對應(yīng)的實(shí)例并緩存起來引镊，模塊上的每一個方法也都生成了對應(yīng)的RCTModuleMethod對象，這里通過ModuleID和MethodID取到對應(yīng)的Module實(shí)例和RCTModuleMethod實(shí)例進(jìn)行調(diào)用篮条。具體實(shí)現(xiàn)在_handleRequestNumber:moduleID:methodID:params:弟头。
6.RCTModuleMethod對JS傳過來的每一個參數(shù)進(jìn)行處理。
RCTModuleMethod可以拿到OC要調(diào)用的目標(biāo)方法的每個參數(shù)類型涉茧，處理JS類型到目標(biāo)類型的轉(zhuǎn)換赴恨，所有JS傳過來的數(shù)字都是NSNumber，這里會轉(zhuǎn)成對應(yīng)的int/long/double等類型伴栓，更重要的是會為block類型參數(shù)的生成一個block伦连。
例如-(void)select:(int)index response:(RCTResponseSenderBlock)callback 這個方法，拿到兩個參數(shù)的類型為int,block钳垮，JS傳過來的兩個參數(shù)類型是NSNumber,NSString(CallbackID)惑淳，這時會把NSNumber轉(zhuǎn)為int，NSString(CallbackID)轉(zhuǎn)為一個block饺窿，block的內(nèi)容是把回調(diào)的值和CallbackID傳回給JS歧焦。
這些參數(shù)組裝完畢后，通過NSInvocation動態(tài)調(diào)用相應(yīng)的OC模塊方法肚医。
7.OC模塊方法調(diào)用完绢馍，執(zhí)行block回調(diào)向瓷。
8.調(diào)用到第6步說明的RCTModuleMethod生成的block。
9.block里帶著CallbackID和block傳過來的參數(shù)去調(diào)JS里MessageQueue的方法invokeCallbackAndReturnFlushedQueue舰涌。
10.MessageQueue通過CallbackID找到相應(yīng)的JS callback方法猖任。
11.調(diào)用callback方法，并把OC帶過來的參數(shù)一起傳過去舵稠，完成回調(diào)超升。
整個流程就是這樣，簡單概括下哺徊，差不多就是：JS函數(shù)調(diào)用轉(zhuǎn)ModuleID/MethodID -> callback轉(zhuǎn)CallbackID -> OC根據(jù)ID拿到方法 -> 處理參數(shù) -> 調(diào)用OC方法 -> 回調(diào)CallbackID -> JS通過CallbackID拿到callback執(zhí)行
事件響應(yīng)
上述第4步留下一個問題室琢，JS是怎樣把數(shù)據(jù)傳給OC，讓OC去調(diào)相應(yīng)方法的落追？
答案是通過返回值盈滴。JS不會主動傳遞數(shù)據(jù)給OC，在調(diào)OC方法時轿钠，會在上述第4步把ModuleID,MethodID等數(shù)據(jù)加到一個隊(duì)列里巢钓，等OC過來調(diào)JS的任意方法時，再把這個隊(duì)列返回給OC疗垛，此時OC再執(zhí)行這個隊(duì)列里要調(diào)用的方法症汹。
一開始不明白，設(shè)計(jì)成JS無法直接調(diào)用OC贷腕，需要在OC去調(diào)JS時才通過返回值觸發(fā)調(diào)用背镇，整個程序還能跑得通嗎。后來想想純native開發(fā)里的事件響應(yīng)機(jī)制泽裳，就有點(diǎn)理解了瞒斩。native開發(fā)里，什么時候會執(zhí)行代碼涮总？只在有事件觸發(fā)的時候胸囱，這個事件可以是啟動事件，觸摸事件瀑梗，timer事件烹笔，系統(tǒng)事件，回調(diào)事件夺克。而在React Native里箕宙，這些事件發(fā)生時OC都會調(diào)用JS相應(yīng)的模塊方法去處理，處理完這些事件后再執(zhí)行JS想讓OC執(zhí)行的方法铺纽，而沒有事件發(fā)生的時候，是不會執(zhí)行任何代碼的哟忍，這跟native開發(fā)里事件響應(yīng)機(jī)制是一致的狡门。
說到OC調(diào)用JS陷寝，再補(bǔ)充一下，實(shí)際上模塊配置表除了有上述OC的模塊remoteModules外其馏，還保存了JS模塊localModules凤跑，OC調(diào)JS某些模塊的方法時，也是通過傳遞ModuleID和MethodID去調(diào)用的叛复，都會走到-enqueueJSCall:args:方法把兩個ID和參數(shù)傳給JS的BatchedBridge.callFunctionReturnFlushedQueue仔引，跟JS調(diào)OC原理差不多，就不再贅述了褐奥。
總結(jié)
整個React Native的JS-OC通信機(jī)制大致就是這樣了咖耘，關(guān)鍵點(diǎn)在于：模塊化，模塊配置表撬码，傳遞ID儿倒，封裝調(diào)用，事件響應(yīng)呜笑，其設(shè)計(jì)思想和實(shí)現(xiàn)方法很值得學(xué)習(xí)借鑒夫否。
