【React Native】從源碼一步一步解析它的實現原理

二、常見的五種App開發模式

• 常見的開發模式有5種（Native App,Web App,Hybrid App,Weex,React Native）

Native App

• Native App:指使用原生API開發App,比如iOS用OC語言開發

• 優點：性能高

• 缺點：開發維護成本高，養一個原生開發工程師需要很多錢，最重要iOS版本更新也成問題。

Web App

• Web App:指使用Html開發的移動端網頁App,類似微信小程序，整個App都是網頁。

• 優點：用戶不需要安裝，不會佔用手機內存

• 缺點：用戶體驗不好，不能離線，必須聯網

Hybrid App

• Hybrid App:混合開發模式，原生Api+Html共同開發，比如iOS,用html寫好界面，用UIWebView展示。

• 優點:界面復用性強，一個界面，iOS和安卓都可以使用

• 缺點:相對於原生，性能相對有所損害

Weex

• Weex:基於Vue(JS框架)的語法開發的App,底層會自動把JS代碼解析成對應平台(iOS,安卓)的原生API，本質還是原生API開發，只不過表面是用Vue開發。

• 優點:可以做到一套代碼，跨平台執行，底層會自動判斷當前是哪個平台，轉換為對應平台的原生API代碼。

• 缺點：開源較晚，互聯網上相關資料還比較少，社區規模較小

React Native

• React Native:基於React開發的App

• 優點：跳過App Store審核，遠程更新代碼，提高迭代頻率和效率，既有Native的體驗，又保留React的開發效率。

• 缺點:對於不熟悉前端開發的人員上手比較慢，不能真正意義上做到跨平台，使用后，對app體積增加。

• 相信大多數人了解完React Native，越來越困惑了，那不是跟Native衝突了嗎，Native是用原生Api開發,但是React Native又是用React開發。

• 要想徹底搞明白，需要了解React Native底層實現原理，又來了，想知道原理，繼續往下看

三、React Native原理

• React Native原理其實跟Weex差不多，底層也會把React轉換為原生API

• React Native和Weex區別在於跨平台上面，Weex只要寫一套代碼，React Native需要iOS,安卓都寫，說明React Native底層解析原生API是分開實現的，iOS一套，安卓一套。

四、React Native如何把React轉化為原生API

• React Native會在一開始生成OC模塊表，然後把這個模塊表傳入JS中，JS參照模塊表，就能間接調用OC的代碼。

相當於買了一個機器人（OC），對應一份說明書（模塊表），用戶（JS）參照說明書去執行機器人的操作。

五、React Native是如何做到JS和OC交互

• iOS原生API有個JavaScriptCore框架，通過它就能實現JS和OC交互，想了解JavaScriptCore，請點擊JavaScriptCore

1.首先寫好JSX代碼（React框架就是使用JSX語法）

2.把JSX代碼解析成javaScript代碼

3.OC讀取JS文件

4.把javaScript代碼讀取出來，利用JavaScriptCore執行

5.javaScript代碼返回一個數組，數組中會描述OC對象，OC對象的屬性，OC對象所需要執行的方法，這樣就能讓這個對象設置屬性，並且調用方法。

JS和OC交互.png

六、React Native啟動流程(iOS)

• 1.創建RCTRootView -> 設置窗口根控制器的View,把RN的View添加到窗口上顯示。

• 2.創建RCTBridge -> 橋接對象,管理JS和OC交互，做中轉左右。

• 3.創建RCTBatchedBridge -> 批量橋架對象，JS和OC交互具體實現都在這個類中。

• 4.執行[RCTBatchedBridge loadSource] -> 載入JS源碼

• 5.執行[RCTBatchedBridge initModulesWithDispatchGroup] -> 創建OC模塊表

• 6.執行[RCTJSCExecutor injectJSONText] -> 往JS中插入OC模塊表

• 7.執行完JS代碼，回調OC，調用OC中的組件

• 8.完成UI渲染

React Native啟動流程(iOS).png

七、React Native載入JS源碼流程(iOS)

• 1.[RCTJavaScriptLoader loadBundleAtURL] -> 載入遠程伺服器中JS代碼

• 2.attemptAsynchronousLoadOfBundleAtURL(C函數) -> 開啟非同步載入JS代碼

• 3.[RCTBatchedBridge executeSourceCode:sourceCode] -> 讓批量交接對象執行源代碼

• [RCTJSCExecutor executeApplicationScript] -> 交給JS執行者（RCTJSCExecutor）執行源碼)

• 真正執行JS代碼的是RCTJSCExecutor對象

• 5.[postNotificationName:RCTJavaScriptDidLoadNotification] -> 發送JS代碼執行完成通知

• 6.RCTRootView監聽到RCTJavaScriptDidLoadNotification通知

• 7.創建RCTRootContentView

• 8.獲取RCTBridge中的RCTUIManager註冊RCTRootView,並且記錄RCTRootView，_viewRegistry