内容简介:整体上分为三大块,Native、JavaScript 与 Bridge:Native 管理 UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge 在二者之间传递消息。即:
一.架构设计
整体上分为三大块,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/
以上所述就是小编给大家介绍的《React Native 架构一览》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
图片转BASE64编码
在线图片转Base64编码工具
HEX HSV 转换工具
HEX HSV 互换工具