React Native架构原理
React Native是一个跨平台开发框架，允许开发人员使用Javascript构建原生应用程序。RN和基于Cordova的应用程序之间的主要区别在于：基于Cordova的应用程序在Webview中运行，而RN应用程序使用原生视图进行渲染；RN应用程序可以直接访问底层移动操作系统提供的所有Native API和视图，因此具有与本机应用程序相同的开发体验和性能表现。
React Native并没有直接将JS代码编译到相应的本机代码中，因为Java和Objective C是强类型语言，而Javascript则不是。本质上，React Native可以被视为一组React组件，其中每个组件代表相应的本机视图和组件；例如，TextInput将具有相应的RN组件，该组件可以直接导入到JS代码中，并像任何其他React组件一样使用。因此，开发人员将像编写任何其他React Web应用程序一样编写代码，但输出将是原生应用程序。
架构概览
React Native的iOS与Android版本的架构大同小异，可以认为大体包含以下三个模块：Native Code/Modules, JavaScript VM, Bridge。
Native Code/Modules
这是应用程序启动后立即生成的主要线程。它加载应用程序并启动JS线程来执行Javascript代码。本机线程还会侦听UI事件，例如“press”，“touch”等。然后，这些事件将通过RN Bridge传递给JS线程。一旦Javascript加载，JS线程就会将需要呈现的内容的信息发送到屏幕上。阴影节点线程使用此信息来计算布局。影子线程基本上就像一个数学引擎，最终决定如何计算视图位置。然后将这些指令传递回主线程以呈现视图。
除了由React Native生成的线程之外，我们还可以在我们构建的自定义本机模块上生成线程，以加快应用程序的性能。例如-动画由React Native在一个单独的本机线程中处理，以从JS线程卸载工作。
JavaScript VM
运行所有JavaScript代码的JS虚拟机。在iOS / Android模拟器和设备上，React Native使用JavaScriptCore，它是为Safari提供支持的JavaScript引擎。JavaScriptCore是一个最初为WebKit构建的开源JavaScript引擎。对于iOS，React Native使用iOS平台提供的JavaScriptCore。它首先在iOS 7中与OS X Mavericks一起推出。
在Android的情况下，React Native将JavaScriptCore与应用程序捆绑在一起。这会增加应用程序的大小。因此，对于Android，RN的Hello World应用程序将需要大约3到4兆字节。
在Chrome调试模式的情况下，JavaScript代码在Chrome本身（而不是设备上的JavaScriptCore）中运行，并通过WebSocket与本机代码通信。在这里，它将使用V8引擎。这样，我们就可以看到有关Chrome调试工具的大量信息，例如网络请求，控制台日志等。
Javascript Queue是主捆绑JS线程运行的线程队列。JS线程运行所有业务逻辑。
Bridge
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两边分别编号，然后做一个映射,然后那个数字/字符串编号会做为一个查找依据来定位跨界对象。
Fabric
React Native团队目前正在研究React Native的新架构。新架构的代号为Fabric，允许React Native以同步方式执行高优先级UI更新。这意味着UI在某些边缘情况下（例如滚动视图）会更具响应性。要了解Fabric是什么以及它将如何改善React Native体验，请观看Parashuram N在React Conf 2018上的精彩演讲。
