React Native 架构一览

栏目: IT技术 · 发布时间: 4年前

内容简介:整体上分为三大块,Native、JavaScript 与 Bridge:Native 管理 UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge 在二者之间传递消息。即:

一.架构设计

整体上分为三大块,Native、JavaScript 与 Bridge:

React Native 架构一览

Native 管理 UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge 在二者之间传递消息。即:

React Native 架构一览

最上层提供类 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 架构一览

线程间交互关系如下:

React Native 架构一览

P.S.图中的 queue 指的是 GCD dispatch queue ,可以简单理解为线程(虽然不正确)

三.启动过程

时序上,App 启动时初始化 React Native 运行时环境(即 Bridge),Bridge 准备好之后开始 run JS,最后开始 Native 渲染:

React Native 架构一览

完整的启动过程是这样:

React Native 架构一览

其中,上半部分是初始化 Bridge 的过程:

分为 4 个部分(这些操作都在启动时进行):

  • 加载 JavaScript 代码:开发模式下从网络下载,生产环境从设备存储中读取

  • 初始化 Native Modules:根据 Native Module 注册信息,加载并实例化所有 Native Module

  • 注入 Native Module 信息:取 Native Module 注册信息,作为全局变量注入到 JS Context 中

  • 初始化 JavaScript 引擎:即 JavaScriptCore

Bridge 建立之后,JavaScript 代码开始执行,渲染用户界面并实现业务功能

四.渲染机制

React Native 架构一览

JS 线程将视图信息(结构、样式、属性等)传递给 Shadow 线程,创建出用于布局计算的 Shadow Tree,Shadow 线程计算好布局之后,再将完整的视图信息(包括宽高、位置等)传递给主线程,主线程据此创建 Native View

对于用户输入,则先由主线程将相关信息打包成事件消息传递到 Shadow 线程,再根据 Shadow Tree 建立的映射关系生成相应元素的指定事件,最后将事件传递到 JS 线程,执行对应的 JS 回调函数,即:

React Native 架构一览

至此,一切都清楚了

参考资料

有所得、有所惑,真好

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

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


以上所述就是小编给大家介绍的《React Native 架构一览》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

共享经济时代

共享经济时代

雷切尔·博茨曼、路·罗杰斯 / 唐朝文 / 上海交通大学出版社 / 2015-6-1 / 38

“共享经济”(sharing economy),也被称为“协同消费”(collaborative consumption),是在互联网上兴起的一种全新的商业模式。简单地说,消费者可以通过合作的方式来和他人共同享用产品和服务,而无需持有产品与服务的所有权。使用但不拥有,分享替代私有,即“我的就是你的”。 当下,全球经济正呈现出这样一种前所未有的趋势:消费者之间的分享、交换、借贷、租赁等共享经济......一起来看看 《共享经济时代》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具