React Native之原理浅析|博客系列

# 一、JavaScriptCore

讲React Native之前，了解JavaScriptCore会有帮助，也是必要的。React Native的核心驱动力就来自于JS Engine. 你写的所有JS和JSX代码都会被JS Engine来执行, 没有JS Engine的参与，你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上，默认的就是JavaScriptCore， iOS 7之后的设备都支持. iOS 不允许用自己的JS Engine. JavaScriptCore来自于WebKit, 所以，安卓上默认也是用JavaScriptCore

你深入了解React Native的第一站应该是 JavaScriptCore

• JavaScriptCore在iOS平台上给React Native提供的接口也仅限于那几个接口，你弄明白了JavaScriptCore那几个接口, React Native 剩下的魔法秘密都可以顺藤摸瓜来分析了。
• 接下来要讲解的就是Facebook围绕这几个接口以及用一个React来颠覆整个native开发所做的精妙设计和封装

# 二、浏览器工作原理

• 浏览器通过Dom Render来渲染所有的元素.
• 浏览器有一整套的UI控件，样式和功能都是按照html标准实现的
• 浏览器能读懂html和css。
• html告诉浏览器绘制什么控件(html tag)，css告诉浏览器每个类型的控件(html tag)具体长什么样。
• 浏览器的主要作用就是通过解析html来形成dom树，然后通过css来点缀和装饰树上的每一个节点

UI的描述和呈现分离开了

1. html文本描述了页面应该有哪些功能，css告诉浏览器该长什么样。
2. 浏览器引擎通过解析html和css，翻译成一些列的预定义UI控件，
3. 然后UI控件去调用操作系统绘图指令去绘制图像展现给用户。
4. Javascript可有可无，主要用于html里面一些用户事件响应，DOM操作、异步网络请求和一些简单的计算

在react native 里面，1和2是不变的，也是用html语言描述页面有哪些功能，然后stylesheet告诉浏览器引擎每个控件应该长什么样。并且和浏览器用的是同一个引擎

在步骤3里面UI控件不再是浏览器内置的控件，而是react native自己实现的一套UI控件（两套，android一套，ios一套），这个切换是在MessageQueque中进行的，并且还可以发现，他们tag也是不一样的

Javascript在react native里面非常重要

• 它负责管理UI component的生命周期，管理Virtual DOM
• 所有业务逻辑都是用javascript来实现或者衔接
• 调用原生的代码来操纵原生组件。
• Javascript本身是无绘图能力的，都是通过给原生组件发指令来完成

# 三、React Native 架构

• 绿色的是我们应用开发的部分。我们写的代码基本上都是在这一层
• 蓝色代表公用的跨平台的代码和工具引擎，一般我们不会动蓝色部分的代码
• 黄色代码平台相关的代码，做定制化的时候会添加修改代码。不跨平台，要针对平台写不同的代码。iOS写OC, android写java，web写js. 每个bridge都有对应的js文件，js部分是可以共享的，写一份就可以了。如果你想做三端融合，你就得理解这一个东西。如果你要自己定制原生控件，你就得写bridge部分
• 红色部分是系统平台的东西。红色上面有一个虚线，表示所有平台相关的东西都通过bridge隔离开来了
• 大部分情况下我们只用写绿色的部分，少部分情况下会写黄色的部分。你如果对基础架构和开源感兴趣，你可以写蓝色部分，然后尝试给那些大的开源项目提交代码。红色部分是独立于React Native的

# 四、React Native、React和JavascriptCore的关系

React Native最重要的三个概念应该就是React Native、React和JavascriptCore

• React是一个纯JS库，所有的React代码和所有其它的js代码都需要JS Engine来解释执行。因为种种原因，浏览器里面的JS代码是不允许调用自定义的原生代码的，而React又是为浏览器JS开发的一套库，所以，比较容易理解的事实是React是一个纯JS库，它封装了一套Virtual Dom的概念，实现了数据驱动编程的模式，为复杂的Web UI实现了一种无状态管理的机制, 标准的HTML/CSS之外的事情，它无能为力。调用原生控件，驱动声卡显卡，读写磁盘文件，自定义网络库等等，这是JS/React无能为力的
• 你可以简单理解为React是一个纯JS 函数， 它接受特定格式的字符串数据，输出计算好的字符串数据
• JS Engine负责调用并解析运行这个函数
• React Native呢？ 它比较复杂。复杂在哪里？前面我们说了React 是纯JS库，意味着React只能运行JS代码，通过JS Engine提供的接口(Html Tag)绘制html支持的那些元素，驱动有限的声卡显卡。简单点说, React只能做浏览器允许它做的事情, 不能调用原生接口， 很多的事情也只能干瞪眼

React Native它可不一样

• 第一点，驱动关系不一样。前面我们说的是, JS Engine来解析执行React脚本, 所以，React由浏览器(最终还是JS Engine)来驱动. 到了React Native这里，RN的原生代码(Timer和用户事件)驱动JS Engine, 然后JS Engine解析执行React或者相关的JS代码，然后把计算好的结果返回给Native code. 然后, Native code 根据JS计算出来的结果驱动设备上所有能驱动的硬件。重点，所有的硬件。也就是说，在RN这里，JS代码已经摆脱JS Engine(浏览器)的限制，可以调用所有原生接口啦
• 第二点, 它利用React的Virtual Dom和数据驱动编程概念，简化了我们原生应用的开发, 同时，它不由浏览器去绘制，只计算出绘制指令，最终的绘制还是由原生控件去负责，保证了原生的用户体验

React Native组件结构

驱动硬件的能力决定能一个软件能做多大的事情，有多大的主控性。研究过操作系统底层东西或者汇编的同学明白，我们大部分时候写的代码是受限的代码，很多特权指令我们是没法使用的，很多设备我们是不允许直接驱动的。我们现在的编程里面几乎已经没有人提中断了，没有中断，硬件的操作几乎会成为一场灾难.

在一定程度上，React Native和NodeJS有异曲同工之妙。它们都是通过扩展JavaScript Engine, 使它具备强大的本地资源和原生接口调用能力，然后结合JavaScript丰富的库和社区和及其稳定的跨平台能力，把javascript的魔力在浏览器之外的地方充分发挥出来

JavaScriptCore + ReactJS + Bridges 就成了React Native

• JavaScriptCore负责JS代码解释执行
• ReactJS负责描述和管理VirtualDom,指挥原生组件进行绘制和更新，同时很多计算逻辑也在js里面进行。ReactJS自身是不直接绘制UI的，UI绘制是非常耗时的操作，原生组件最擅长这事情。
• Bridges用来翻译ReactJS的绘制指令给原生组件进行绘制，同时把原生组件接收到的用户事件反馈给ReactJS。 要在不同的平台实现不同的效果就可以通过定制Bridges来实现

深入 Bridge 前面有提到, RN厉害在于它能打通JS和Native Code, 让JS能够调用丰富的原生接口,充分发挥硬件的能力, 实现非常复杂的效果,同时能保证效率和跨平台性。

打通RN任督二脉的关键组件就是Bridge. 在RN中如果没有Bridge, JS还是那个JS，只能调用JS Engine提供的有限接口，绘制标准html提供的那些效果,那些摄像头，指纹，3D加速,声卡, 视频播放定制等等，JS都只能流流口水，原生的、平台相关的、设备相关的效果做不了， 除非对浏览器进行定制

• Bridge的作用就是给RN内嵌的JS Engine提供原生接口的扩展供JS调用。所有的本地存储、图片资源访问、图形图像绘制、3D加速、网络访问、震动效果、NFC、原生控件绘制、地图、定位、通知等都是通过Bridge封装成JS接口以后注入JS Engine供JS调用。理论上，任何原生代码能实现的效果都可以通过Bridge封装成JS可以调用的组件和方法, 以JS模块的形式提供给RN使用。
• 每一个支持RN的原生功能必须同时有一个原生模块和一个JS模块，JS模块是原生模块的封装，方便Javascript调用其接口。Bridge会负责管理原生模块和对应JS模块之间的沟通, 通过Bridge, JS代码能够驱动所有原生接口，实现各种原生酷炫的效果。
• RN中JS和Native分隔非常清晰，JS不会直接引用Native层的对象实例，Native也不会直接引用JS层的对象实例(所有Native和JS互掉都是通过Bridge层会几个最基础的方法衔接的)。
• Bridge 原生代码负责管理原生模块并生成对应的JS模块信息供JS代码调用。每个功能JS层的封装主要是针对ReactJS做适配，让原生模块的功能能够更加容易被用ReactJS调用。MessageQueue.js是Bridge在JS层的代理，所有JS2N和N2JS的调用都会经过MessageQueue.js来转发。JS和Native之间不存在任何指针传递，所有参数都是字符串传递。所有的instance都会被在JS和Native两边分别编号，然后做一个映射,然后那个数字/字符串编号会做为一个查找依据来定位跨界对象。

# 五、Bridge各模块简介

# 5.1 RCTRootView

• RCTRootView是React Native加载的地方,是万物之源。从这里开始，我们有了JS Engine, JS代码被加载进来，对应的原生模块也被加载进来，然后js loop开始运行。 js loop的驱动来源是Timer和Event Loop(用户事件). js loop跑起来以后应用就可以持续不停地跑下去了。
• 如果你要通过调试来理解RN底层原理，你也应该是从RCTRootView着手，顺藤摸瓜。
• 每个项目的AppDelegate.m的- (BOOL)application:didFinishLaunchingWithOptions:里面都可以看到RCTRootView的初始化代码，RCTRootView初始化完成以后，整个React Native运行环境就已经初始化好了，JS代码也加载完毕，所有React的绘制都会有这个RCTRootView来管理。

RCTRootView做的事情如下

一个App可以有多个RCTRootView, 初始化的时候需要手动传输Bridge做为参数，全局可以有多个RCTRootView, 但是只能有一个Bridge

如果你做过React Native和原生代码混编，你会发现混编就是把AppDelegate里面那段初始化RCTRootView的代码移动到需要混编的地方，然后把RCTRootView做为一个普通的subview来加载到原生的view里面去，非常简单。不过这地方也要注意处理好单Bridge实例的问题，同时，混编里面要注意RCTRootView如果销毁过早可能会引发JS回调奔溃的问题

# 5.2 RCTRootContentView

# 5.3 RCTBridge

这是一个加载和初始化专用类，用于前期JS的初始化和原生代码的加载

• 负责加载各个Bridge模块供JS调用
• 找到并注册所有实现了RCTBridgeModule protocol的类, 供JS后期使用.
• 创建和持有 RCTBatchedBridge

# 5.4 RCTBatchedBridge

如果RCTBridge是总裁, 那么RCTBatchedBridge就是副总裁。前者负责发号施令，后者负责实施落地

这里需要提一下的是

内部机制