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 回调函数,即:
至此,一切都清楚了
参考资料
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 架构一览的更多相关文章
- React Native 架构演进
写在前面 上一篇(React Native 架构一览)从设计.线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React Native 正在进行的架构升级 ...
- 1000 千米高空俯瞰 React Native
一.历史:React Native 从开始到现在 React Native 的定位是通过 React 构建原生 App: A framework for building native apps wi ...
- React Native开发 - 搭建React Native开发环境
移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...
- reactNative-解决react native使用fetch函数 Network request failed 问题
解决react native使用fetch函数Network request failed问题 最近公司新开发一个app, 用react native架构好后,用xcode模拟器打开app,对接登陆接 ...
- React Native For Android 架构初探
版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...
- React Native IOS ---基础环境搭建(前端架构师)
React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- React Native框架如何白盒测试-HIPPY接口测试架构篇
本文转载自腾讯TMQ团队 ,侵权删. 1.开天辟地 Hippy是什么呢?简单点,能用JavaScript来写Android和iOS应用的框架, 类似业界的React Native. 好吧,我们还是严谨 ...
- 基于React Native的跨三端应用架构实践
作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能 ...
随机推荐
- L26 使用卷积及循环神经网络进行文本分类
文本情感分类 文本分类是自然语言处理的一个常见任务,它把一段不定长的文本序列变换为文本的类别.本节关注它的一个子问题:使用文本情感分类来分析文本作者的情绪.这个问题也叫情感分析,并有着广泛的应用. 同 ...
- JavaScript函数作用域和声明提前(3.10.1 page.57)
<h4>3.函数作用域和声明提前</h4> <p> <!--<script type="text/javascript">-- ...
- python机器学习入门-(1)
机器学习入门项目 如果你和我一样是一个机器学习小白,这里我将会带你进行一个简单项目带你入门机器学习.开始吧! 1.项目介绍 这个项目是针对鸢尾花进行分类,数据集是含鸢尾花的三个亚属的分类信息,通过机器 ...
- 图解Knative核心组件Serving基础设计
最近闲下来,打算把Knative的核心组件Serving给学习下,会继续采用k8s源码学习的方式,管中窥豹以小击大,学习serving的主要目标: 可观测性基础设施.自动伸缩.流量管理等核心组件的设计 ...
- JDBC教程——检视阅读
JDBC教程--检视阅读 参考 JDBC教程--W3Cschool JDBC教程--一点教程,有高级部分 JDBC教程--易百 JDBC入门教程 – 终极指南 略读 三层架构详解,JDBC在数据访问层 ...
- HTML+CSS教程(六)浮动-float+定位-position+居中问题
一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置 ...
- PHP入门-1
基本数据类型: 1.整形 2.浮点型 3.字符串 4.布尔型 5.数组和对象 6.null 7.资源类型 8.伪类型 由于php是弱语言,所以他的数据类型不用自己来定义.定义一个数据类型,$name ...
- 预测球队比赛结果及利用pyinstaller打包文件
一.预测乒乓球球队比赛成绩 1.乒乓球比赛规则 一局比赛:在一局比赛中,先得11分的一方为胜方:10平后,先多得2分的一方为胜方. 一场比赛:单打的淘汰赛采用七局四胜制,双打淘汰赛和团体赛采用五局三胜 ...
- 计算3的n次幂htm代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Swoole 实战:MySQL 查询器的实现(协程连接池版)
目录 需求分析 使用示例 模块设计 UML 类图 入口 事务 连接池 连接 查询器的组装 总结 需求分析 本篇我们将通过 Swoole 实现一个自带连接池的 MySQL 查询器: 支持通过链式调用构造 ...