一. 架構設計
整體上分為三大塊：Native、JavaScript 與 Bridge：
[caption id="attachment_2013" align="alignnone" width="625"]
React Native layers[/caption]
Native 管理 UI 更新及互動，JavaScript 呼叫 Native 能力實現業務功能，Bridge 在二者之間傳遞消息。即：
最上層提供類 React 支援，運行在 JavaScriptCore 提供的 JavaScript 執行環境中，Bridge 層將 JavaScript 與 Native 世界連接起來。具體的，Shadow Tree 用來定義 UI 效果及互動功能，Native Modules 提供 Native 功能（比如藍牙），二者之間透過 JSON 消息相互通信
Bridge 層是 React Native 技術的關鍵，設計上具有 3 個特點：
-
非同步（asynchronous）：不依賴於同步通信
-
可序列化（serializable）：保證一切 UI 操作都能序列化成 JSON 並轉換回來
-
批次處理（batched）：對 Native 呼叫進行排隊，批次處理
將 UI 操作描述成一系列指令，序列化成 JSON 格式的消息：
Just as React DOM turns React state updates into imperative, mutative calls to DOM APIs like document.createElement(attrs) and .appendChild(), React Native was designed to return a single JSON message that lists mutations to perform, like [["createView", attrs], ["manageChildren", ...]].
相當靈活，甚至基於這種命令式的機制可以讓 JS 程式碼跑在另一個 JS 引擎上，即 Chrome debugging：
Chrome debugging, which runs all the JavaScript code asynchronously over a WebSocket connection.
二. 執行緒模型
React Native 中主要有 3 個執行緒，分別是：
-
UI Thread：Android/iOS（或其他平台）應用中的主執行緒
-
Shadow Thread：進行佈局計算和構造 UI 介面的執行緒
-
JS Thread：React 等 JavaScript 程式碼都在這個執行緒執行
此外，還有一類 Native Modules 執行緒，不同的 Native Module 可以運行在不同的執行緒中（具體見 Threading）：
[caption id="attachment_2014" align="alignnone" width="625"]
React Native threading model[/caption]
執行緒間互動關係如下：
P.S. 圖中的 queue 指的是 GCD dispatch queue，可以簡單理解為執行緒（雖然不正確）
三. 啓動過程
時序上，App 啓動時初始化 React Native 執行環境（即 Bridge），Bridge 準備好之後開始 run JS，最後開始 Native 渲染：
完整的啓動過程是這樣：
[caption id="attachment_2015" align="alignnone" width="625"]
React Native App start up flow[/caption]
其中，上半部分是初始化 Bridge 的過程：
分為 4 個部分（這些操作都在啓動時進行）：
-
載入 JavaScript 程式碼：開發模式下從網路下載，生產環境從設備儲存中讀取
-
初始化 Native Modules：根據 Native Module 註冊資訊，載入並實例化所有 Native Module
-
注入 Native Module 資訊：取 Native Module 註冊資訊，作為全域變數注入到 JS Context 中
-
初始化 JavaScript 引擎：即 JavaScriptCore
Bridge 建立之後，JavaScript 程式碼開始執行，渲染用戶介面並實現業務功能
四. 渲染機制
[caption id="attachment_2016" align="alignnone" width="625"]
React Native threads[/caption]
JS 執行緒將視圖資訊（結構、樣式、屬性等）傳遞給 Shadow 執行緒，創建出用於佈局計算的 Shadow Tree，Shadow 執行緒計算好佈局之後，再將完整的視圖資訊（包括寬高、位置等）傳遞給主執行緒，主執行緒據此創建 Native View
對於用戶輸入，則先由主執行緒將相關資訊打包成事件消息傳遞到 Shadow 執行緒，再根據 Shadow Tree 建立的映射關係生成相應元素的指定事件，最後將事件傳遞到 JS 執行緒，執行對應的 JS 回調函數，即：
[caption id="attachment_2017" align="alignnone" width="625"]
React Native UI interaction[/caption]
至此，一切都清楚了
暫無評論，快來發表你的看法吧