RN简介：

一  简介

React Native是Facebook在F8大会开源的JavaScript框架,(2015年9月15日发布)可以让广大开发者使用JavaScript和React开发跨平台的移动应用. 其核心设计理念：

既拥有Native的用户体验、又保留React的开发效率, 目前，React Native基本完成了对多端的支持，实现了真正意义上的面向配置开发:

开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件, 实现：Android, iOS 两端代码的复用,核心设计理念: 既拥有Native的用户体验,又保留React的开发效率. github地址：https://github.com/facebook/react-native/

特点：

1. 使用了 Virtual DOM(虚拟DOM)
2. 提供了响应式(Reactive)和组件化(Composable)的视图组件
3. 将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库
4. 跨平台
5. 原生UI性能体验

缺点：

1. 原生不支持web
2. 原生不支持热更新
3. 缺乏很多系统能力和第三方组件能力

总之采用JS语言作为开发语言同时支持CSS布局样式，这样兼容了当前的JS生态，对开发者做到了跨端(Android, IOS)的开发，提高了开发效率。

一个RN工程可以分为三大部分，JS域、native域以及负责两个域之间通信的C++ Bridge(android/IOS), 采用react语法，使用flex布局，同时引入了yoga布局，

对JS的引擎(v8/JSCore)进行了逻辑上的抽象JSI.

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 调用进行排队，批量处理

二.线程模型

React Native 中主要有 3 个线程，分别是：

• UI Thread：Android/iOS（或其它平台）应用中的主线程，主要是组件的映射绘制。

• Shadow Thread：进行布局计算和构造 UI 界面的线程

• JS Thread：React 等 JavaScript 代码都在这个线程执行

此外，还有一类 Native Modules 线程，不同的 Native Module 可以运行在不同的线程中（具体见Threading）：

线程交互关系：

三.启动过程

时序上，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

 

 

参考文献：http://www.ayqy.net/blog/react-native-architecture-overview/