前言

公司近期正在使用React Native，看了些相關文件，大概的實現邏輯基本捋順，希望對想了解React Native實現原理的同學有所幫助，其實只要看懂文章的四幅圖就明白它的原理了。

一、React Native背景

• 有沒有朋友想過一個問題，為什麼取名React Native?React是什麼，Native又是什麼？

React

• React 是由Facebook推出的一個JavaScript框架，主要用於前段開發。
• React 採用元件化方式簡化Web開發。
  • DOM:每個HTML介面可以看做一個DOM。
  • 原生的web開發方式，HTML一個檔案，javaScript一個檔案，檔案分開，就會導致修改起來比較麻煩。
  • 可以把一組相關的HTML標籤和JavaScript單獨封裝到一個元件類中，便於複用，方便開發。
• React 可以高效的繪製介面。
  • 原生的Web,重新整理介面(DOM)，需要把整個介面重新整理。
  • React只會重新整理部分介面，不會整個介面重新整理。
  • 因為React獨創了Virtual DOM機制。Virtual DOM是一個存在於記憶體中的JavaScript物件，它與DOM是一一對應的關係，當介面傳送變化時，React會利用DOM Diff演算法，把有變化的DOM進行重新整理。
• React是採用JSX語法，一種JS語法糖，方便快速開發。

Native

• 想要了解Native是什麼，需要了解下開發App有哪些開發模式，在這先賣一個關子，請繼續往下看。

二、常見的五種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互動。
  • 1.首先寫好JSX程式碼（React框架就是使用JSX語法）。
  • 2.把JSX程式碼解析成javaScript程式碼。
  • 3.OC讀取JS檔案。
  • 4.把javaScript程式碼讀取出來，利用JavaScriptCore執行。
  • 5.javaScript程式碼返回一個數組，陣列中會描述OC物件，OC物件的屬性，OC物件所需要執行的方法，這樣就能讓這個物件設定屬性，並且呼叫方法。

                                                         JS和OC互動

六、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)

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

• 1.[RCTJavaScriptLoader loadBundleAtURL] -> 載入遠端伺服器中JS程式碼。
• 2.attemptAsynchronousLoadOfBundleAtURL(C函式) -> 開啟非同步載入JS程式碼。
• 3.[RCTBatchedBridge executeSourceCode:sourceCode] -> 讓批量交接物件執行原始碼。
• 4.[RCTJSCExecutor executeApplicationScript] -> 交給JS執行者（RCTJSCExecutor）執行原始碼)。
  • 真正執行JS程式碼的是RCTJSCExecutor物件
• 5.[postNotificationName:RCTJavaScriptDidLoadNotification] -> 傳送JS程式碼執行完成通知。
• 6.RCTRootView監聽到RCTJavaScriptDidLoadNotification通知。
• 7.建立RCTRootContentView。
• 8.獲取RCTBridge中的RCTUIManager註冊RCTRootView,並且記錄RCTRootView，_viewRegistry。
  • RCTUIManager:管理UI元件
  • _viewRegistry：儲存所有註冊的View
• 9.[RCTRootView runApplication:bridge] -> 通知JS執行App。
• 10.[RCTBridge enqueueJSCall:@"AppRegistry"
  method:@"runApplication"
  args:@[moduleName, appParameters]
  completion:NULL] -> 通過橋接物件讓JS呼叫AppRegistry
• 11.[RCTBatchedBridge _actuallyInvokeAndProcessModule:module method:method arguments:args queue:RCTJSThread] -> 通過批量橋架讓JS執行AppRegistry方法。
• 12.[RCTJSCExecutor _executeJSCall:bridgeMethod arguments:@[module, method, args] unwrapResult:unwrapResult callback:onComplete] -> 讓JS執行者呼叫JS程式碼。
• 13.執行完JS程式碼，就能獲取執行JS結果，是一個數組，OC需要做的事情都會儲存到這個陣列中。
• 14.[RCTBatchedBridge _processResponse:json error:error] -> 處理執行完JS程式碼返回的結果物件。
• 15.[RCTBatchedBridge handleBuffer] -> 處理JS返回的資料，JS會返回的方法呼叫陣列：按順序描述需要呼叫哪個物件的方法，一組呼叫包含（module，method，arguments）。
• 16.[self callNativeModule:[moduleIDs[index] integerValue]
  method:[methodIDs[index] integerValue]
  params:paramsArrays[index]] -> 遍歷陣列，依次執行原生方法
  • 注意：當前方法，在遍歷陣列中的程式碼塊中執行，不只是執行一次

                                                  React Native載入JS原始碼流程

八、React NativeUI控制元件渲染流程(iOS)

• 1.[RCTRootView runApplication:bridge] -> 通知JS執行App。

• 2.[RCTBatchedBridge _processResponse:json error:error] -> 處理執行完JS程式碼(runApplication)返回的相應，包含需要新增多少子控制元件的資訊。

• 3.[RCTBatchedBridge batchDidComplete] -> 批量橋架物件呼叫批量處理完成方法。

• 4.[RCTUIManager batchDidComplete] -> RCTUIManager呼叫批量處理完成的方法，就會開始去載入rootView的子控制元件。

• 5.[RCTUIManager createView:viewName:rootTag:props] -> 通過JS執行OC程式碼，讓UI管理者建立子控制元件View。

  • 通過RCT_EXPORT_METHOD巨集定義createView這個方法

  RCT_EXPORT_METHOD(createView:(nonnull NSNumber *)reactTag
                viewName:(NSString *)viewName
                rootTag:(__unused NSNumber *)rootTag
                props:(NSDictionary *)props)
  

  • RCT_EXPORT_METHOD巨集:會在JS中生成對應的OC方法，這樣JS就能直接呼叫
  • 注意每建立一個UIView,就會建立一個RCTShadowView，與UIView一一對應
  • RCTShadowView:儲存對應UIView的佈局和子控制元件,管理UIView的載入

• 6.[RCTUIManager _layoutAndMount] -> 佈局RCTRootView和增加子控制元件。

• 7.[RCTUIManager setChildren:reactTags:] -> 給RCTRootView對應的RCTRootShadowView設定子控制元件。

  • 注意：此方法也是JS呼叫OC方法

• 8.[RCTRootShadowView insertReactSubview:view atIndex:index++] -> 遍歷子控制元件陣列，給RCTRootShadowView插入所有子控制元件。

• 9.[RCTShadowView processUpdatedProperties:parentProperties:] -> 處理儲存在RCTShadowView中屬性，就會去佈局RCTShadowView對應UIView的所有子控制元件。

• 10.[RCTView didUpdateReactSubviews] -> 給原生View新增子控制元件。

• 11.完成UI渲染。

                                               React Native (UI控制元件渲染流程)

九、React Native事件處理流程(iOS)

• 1.在建立RCTRootContentView的時候，內部會建立RCTTouchHandler。
  • RCTTouchHandler:繼承UIGestureRecognizer，也就是它就是一個手勢
    • 並且它會作為RCTRootContentView的手勢，這樣點選RCTRootContentView，就會觸發RCTTouchHandler
  • RCTTouchHandler:內部實現了touchBegin等觸控方法，用來處理觸控事件
• 2.在建立RCTTouchHandler的時候，內部會建立RCTEventDispatcher。
  • RCTEventDispatcher:用來把事件處理傳遞給JS的方法處理，也就是當UI介面產生事件，就會執行JS的程式碼處理。
• 3.通過RCTRootContentView截獲點選事件。
  • 產生事件就會去觸犯RCTRootContentView中的RCTTouchHandler物件。
• 4.當產生事件的時候,會執行[RCTTouchHandler touchBegin]。
• 5.RCTTouchHandler的touch方法，會執行[RCTTouchHandler _updateAndDispatchTouches:eventName:]。
  • 內部會建立RCTTouchEvent事件物件
• 6.[RCTEventDispatcher sendEvent:event] -> 讓事件分發物件呼叫傳送事件物件。
  • 內部會把事件儲存到_eventQueue（事件佇列中）
• 7.[RCTEventDispatcher flushEventsQueue] -> 讓事件分發物件沖刷事件佇列，就是獲取事件佇列中所有事件執行。
• 8.[RCTEventDispatcher dispatchEvent:event] -> 遍歷事件佇列，一個一個分發事件。
  • 分發事件的本質：就是去執行JS的程式碼，相應事件。
• 9.[RCTBatchedBridge enqueueJSCall:[[event class] moduleDotMethod] args:[event arguments]]; -> 讓橋架物件呼叫JS處理事件。
  • 本質：就是產生事件呼叫JS程式碼
• 10.這樣就能完成把UI事件交給JS程式碼相應。

                                                 React Native (事件處理流程)