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/

特点：

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

缺点：

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

总之采用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/

RN系列文章---RN简介相关推荐

openGauss数据库源码解析系列文章--openGauss简介（一）
openGauss数据库是华为深度融合在数据库领域多年经验,结合企业级场景要求推出的新一代企业级开源数据库.此前,Gauss松鼠会已经发布了openGauss数据库核心技术系列文章,介绍了openGa ...
Asp.net MVC2.0系列文章-MVC简介篇
使用微软VS工具开发Web应用程序主要有两种方式:一种是常用的创建Asp.net Web Forms,另外一种就是今天着重介绍的Asp.net MVC. <?XML:NAMESPACE PRE ...
【5G/4G】NAS与AS层完整性保护与加密算法系列文章
文章目录 NAS与AS层完整性保护与加密算法系列文章算法简介算法链接如下本人就职于国际知名终端厂商,负责modem芯片研发. 在5G早期负责终端数据业务层.核心网相关的开发工作,目前牵头6G算 ...
三、美团大众点评CAT监控系列文章---Springboot集成CAT并实现邮件告警
文章目录一.配置过程二.相关的参考文档三.系列文章一.配置过程登录自己的cat服务端默认登录用户名和密码都是 catadmin添加一个监控规则: 如下面的监控规则就是说,如果在一分钟以内访 ...
二、美团大众点评CAT监控系列文章---CAT监控的服务端配置
文章目录一.服务端下载和配置二.相关的参考文档三. 系列文章一.服务端下载和配置运行环境及开发工具如下: Jdk8 ,tomcat8,windows10,itellij idea,maven ...
01、RN 系列之什么是 ReactNative
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者: TigerChain 地址: www.jianshu.com/p/717ccdd7c- 本文出自 TigerChai ...
智能小车系列文章之小车简介
智能小车系列文章之小车简介提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成 ...
saltstack之基础入门系列文章简介
使用saltstack已有一段时间,最近由于各种原因,特来整理了saltstack基础入门系列文章,已备后续不断查阅(俗话说好记性不如烂笔头),也算是使用此工具的一个总结. saltstack的前六篇 ...
【计算机基础系列文章(一)】计算机简介
什么是计算机计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速处理海量数据的现代化智能 ...

RN系列文章---RN简介

一简介

二.线程模型

三.启动过程

四.渲染机制

RN系列文章---RN简介相关推荐

最新文章

热门文章

RN系列文章---RN简介

一 简介

二.线程模型

三.启动过程

四.渲染机制

RN系列文章---RN简介相关推荐

最新文章

热门文章

一简介