【用友iUAP專家講堂】解析React Native內部通訊機制
React Native是Facebook發布的一個用JavaScript開發移動應用的開源框架。框架目前只支持iOS平臺,但一經推出,便受到國內外移動開發者的追捧,從GitHub上的統計數據看,自React Native開源至今的3個月時間,已經有170位貢獻者對項目進行了1790余次的提交。
在React Native之前,基于JavaScript開發跨平臺移動應用的框架已經有很多,這些框架都采用構建WEB頁面的方式,但由于DOM性能和瀏覽器單線程處理等問題,構建的應用在移動端體驗差,雖然開發成本很低,仍然無法取代原生開發。React Native與其他框架不同,它使用JavaScript來調用原生控件,使應用運行在本地環境中,從而使應用在移動端的體驗堪比原生應用。
React Native由于使用JavaScript調用原生控件,運行過程中需要JavaScript和原生語言進行頻繁、高效的通訊。這一過程極其復雜,下面以iOS為例詳述其過程。
React Native內部通訊機制圖解
React Native使用了iOS自帶的JavaScriptCore作為JS解析的引擎,但并未使用其提供的OC-JS(OC,即Object-C;JS,即JavaScript)通訊機制,而是自己實現了一套機制。在通訊機制中有一個稱為模塊配置表的配置文件,這個文件中記錄了OC中可供JS調用的模塊和方法。在OC和JS中分別有一個通訊橋,每個通訊橋中存儲著一份模塊配置表,這是OC-JS通訊的基礎。詳細的調用過程是這樣的:
1、事件觸發JS函數調用,事件包含定時事件、加載事件等。
2、JS通訊橋對調用進行分析,把調用的模塊、方法解析成模塊ID、方法ID
3、JS通訊橋根據返回函數生成返回函數ID,再聯合調用參數、模塊ID、方法ID生成一個消息模型,然后將模型置于消息隊列中,等待OC來讀取。
4、OC通訊橋調用JS的某個方法時,JS在返回數據中插入消息隊列的數據,OC在消息隊列中將消息模型取出。
5、OC根據模塊配置表解析消息模型,找到OC中對應的模塊和方法。
6. RCTModuleMethod對象對傳遞的JS參數進行轉換和組裝處理,然后通過NSInvocation動態調用OC方法,同時RCTModuleMethod生成block回調對象。
7、OC方法調用技術后,獲取調用的返回值和返回函數ID,執行block回調。
8、block執行JS消息隊列固有的函數回調方法,并將返回函數ID和返回值傳遞給該方法。
9、JS消息隊列根據返回函數ID,找到對應的JS函數。
10、調用該JS函數,傳遞返回值,完成回調。
在第4步中并未采用JS直接調用OC的方式,而是使用了消息隊列來存儲JS對OC的調用并等待OC讀取,這表明在React Native中,OC與JS通訊是單向的。這一過程是建立在嚴格的事件響應機制基礎上的:只有在事件觸發的時候,JS代碼才會執行,由于采用了原生控件,事件觸發的時候,OC程序必然也會運行,OC去調用JS,便可將JS消息隊列中的消息全部讀取并處理。在這個過程中,JS充當了數據源的角色,OC是控制器,調用JS數據源并進行解析,然后映射到對應OC模塊上。
以上過程便是JavaScript和Object-C通訊的全部過程細節,整個過程的關鍵點在于:模塊化、ID傳遞、封裝調用、事件響應。這一個過程確實很復雜,但得益于JavaScriptCore和Object-C的高性能,相比于WEB頁面的DOM操作,這一過程運行極為高效,體驗幾乎媲美原生應用。