React Native 架構一覽

2019 年 11 月 29 日
筆記

一.架構設計

整體上分為三大塊，Native、JavaScript 與 Bridge：

React Native layers

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）：

React Native threading model

執行緒間交互關係如下：

P.S.圖中的 queue 指的是GCD dispatch queue，可以簡單理解為執行緒（雖然不正確）

三.啟動過程

時序上，App 啟動時初始化 React Native 運行時環境（即 Bridge），Bridge 準備好之後開始 run JS，最後開始 Native 渲染：

完整的啟動過程是這樣：

React Native App start up flow

其中，上半部分是初始化 Bridge 的過程：

分為 4 個部分（這些操作都在啟動時進行）：

載入 JavaScript 程式碼：開發模式下從網路下載，生產環境從設備存儲中讀取
初始化 Native Modules：根據 Native Module 註冊資訊，載入並實例化所有 Native Module
注入 Native Module 資訊：取 Native Module 註冊資訊，作為全局變數注入到 JS Context 中
初始化 JavaScript 引擎：即 JavaScriptCore

Bridge 建立之後，JavaScript 程式碼開始執行，渲染用戶介面並實現業務功能

四.渲染機制

React Native threads

JS 執行緒將視圖資訊（結構、樣式、屬性等）傳遞給 Shadow 執行緒，創建出用於布局計算的 Shadow Tree，Shadow 執行緒計算好布局之後，再將完整的視圖資訊（包括寬高、位置等）傳遞給主執行緒，主執行緒據此創建 Native View

對於用戶輸入，則先由主執行緒將相關資訊打包成事件消息傳遞到 Shadow 執行緒，再根據 Shadow Tree 建立的映射關係生成相應元素的指定事件，最後將事件傳遞到 JS 執行緒，執行對應的 JS 回調函數，即：

React Native UI interaction

至此，一切都清楚了

參考資料

Part One: React and Codegen
Performance
React Native Scheduling
Bridging in React Native
React Native – Fabric review-2018-07-25
How React Native constructs app layouts (and how Fabric is about to change it)
Optimising React Native: Tools and Tips
React Native: Under the Hood：以及配套 Slides
React Native Architecture Overview：以及配套 Slides
Chain React 2017: Breaking Down Bridging in React Native by Peggy Rayzis：以及配套 Slides，以及文字版