reactnative 原生組件通訊原理

http://www.csdn.net/article/2015-11-27/2826345-compare-React-Native-with-ExMobi

原生組件通訊原理

React Native經過JavaScript編寫APP的方式，乍看覺得是以webview提供的現成的JS與原生語言之間的互調，可是若是當咱們調試一個React Native程序的時候，在debug視圖中是不會看到任何webview被調用的痕跡。因此，實際上React Native並無使用現成的與webview的通訊方法，而是使用了更直接的JS運行環境，好比在iOS中爲系統自帶的JavaScriptCore。這與Phonegap這類以webview爲主的界面展示與本地能力調用的模式有本質上的區別，也是確保React Native高性能和高效率的基礎。

有了這個核心基礎，咱們再來看看React Native是如何經過JS來掛鉤到原生UI和本地能力的。

 

   

從上圖很容易能夠看到，開發者經過JS去調用一個React Native提供的方法，實際須要先通過兩個橋接封裝類，一個JS的橋接，另外一個是原生的橋接。兩個橋接類之間就是經過前面提到的JS運行環境來通訊。JS橋接類的做用是將開發者的調用行爲加入到React Native的模塊調用隊列，同時生成一個回調的ID。Native橋接類的做用是將隊列裏的調用行爲取出來根據模塊找到對應的原生UI或者本地能力的函數來執行，並將執行的結果經過回調的ID逐步傳遞到開發者的JS回調函數中。也就是通過這兩個橋接類的相互做用，創建起了JS函數與原生能力的調用序列。