阅读 883

React Native 架构一览

一.架构设计

整体上分为三大块,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

至此,一切都清楚了

参考资料

有所得、有所惑,真好

关注「前端向后」微信公众号,你将收获一系列「用原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术

本文首发于 ayqy.net ,原文链接:www.ayqy.net/blog/react-…

文章分类
前端
文章标签