React Native 架构一览

一.架构设计

整体上分为三大块，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 回调函数，即：

至此，一切都清楚了

 

参考资料

• 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，以及文字版

 

有所得、有所惑，真好

点击关注，你将收获一系列「用心原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术

本文首发于 ayqy.net ，原文链接：http://www.ayqy.net/blog/react-native-architecture-overview/