一.架構設計
整體上分為三大塊，Native、JavaScript 與 Bridge：
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）：
線程間交互關系如下：
P.S.圖中的 queue 指的是GCD dispatch queue，可以簡單理解為線程（雖然不正確）
三.啟動過程
時序上，App 啟動時初始化 React Native 運行時環境（即 Bridge），Bridge 准備好之后開始 run JS，最后開始 Native 渲染：
完整的啟動過程是這樣：
其中，上半部分是初始化 Bridge 的過程：
分為 4 個部分（這些操作都在啟動時進行）：
-
加載 JavaScript 代碼：開發模式下從網絡下載，生產環境從設備存儲中讀取
-
初始化 Native Modules：根據 Native Module 注冊信息，加載並實例化所有 Native Module
-
注入 Native Module 信息：取 Native Module 注冊信息，作為全局變量注入到 JS Context 中
-
初始化 JavaScript 引擎：即 JavaScriptCore
Bridge 建立之后，JavaScript 代碼開始執行，渲染用戶界面並實現業務功能
四.渲染機制
JS 線程將視圖信息（結構、樣式、屬性等）傳遞給 Shadow 線程，創建出用於布局計算的 Shadow Tree，Shadow 線程計算好布局之后，再將完整的視圖信息（包括寬高、位置等）傳遞給主線程，主線程據此創建 Native View
對於用戶輸入，則先由主線程將相關信息打包成事件消息傳遞到 Shadow 線程，再根據 Shadow Tree 建立的映射關系生成相應元素的指定事件，最后將事件傳遞到 JS 線程，執行對應的 JS 回調函數，即：
至此，一切都清楚了
參考資料
-
How React Native constructs app layouts (and how Fabric is about to change it)
-
Chain React 2017: Breaking Down Bridging in React Native by Peggy Rayzis：以及配套 Slides，以及文字版
有所得、有所惑，真好
點擊關注，你將收獲一系列「用心原創」的高質量技術文章，主題包括但不限於前端、Node.js以及服務端技術
本文首發於 ayqy.net ，原文鏈接：http://www.ayqy.net/blog/react-native-architecture-overview/