从设计、线程模型等方面介绍 React Native 的现有架构
试读
一.架构设计
整体上分为三大块，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]
至此，一切都清楚了
参考资料
评论
暂无评论