React Native 的新架构
刚接触 RN 时 版本还是 0.44 没有JSI，Hermes, 使用 bridge 通信。 Facebook 从18年6月宣布了重构 RN 到现在特性优化越来越好， 期待 RN 1.0 吧 (ಥ_ಥ)…
随着 RN 团队关于 深入了解 React Native 的新架构 文章的发布，这次新架构主要调整在于以下四点：
- JavaScript Interface(JSI)
- Fabric
- Turbo Modules
- CodeGen
当运行一个 RN 应用程序时，你所有的 JavaScript 代码都被打包成 JS Bundle, 当 RN App 运行时，一般会有三个线程：
- JavaScript 线程：属于 JS 引擎，用于运行 JS Bundle;
- Native/UI 线程：运行 Native Modules 和处理 UI 渲染、用户手势等操作;
- Shadow 线程：在渲染之前计算元素的布局;
在 RN 里 JS 线程和 Native 线程之前是通过 bridge 来交互，而交互的数据必须被转化为 JSON, 而 bridge 只能处理异步通信。
JavaScript Interface (JSI)
目前 RN 使用 Bridge Module 来让 JS 和 Native 线程进行通信，每次利用 Bridge 发送数据时，都需要转换为 JSON， 而收到数据时也需要进行解码。
这就意味着 JavaScript 和 Native 直接是隔离的，也就是 JS 线程不能直接调用 Native 线程上的方法。
另一个就是；通过 Bridge 发送的消息本质上是异步的，如果需要 JS 代码和 Naitve 同步执行在之前是无法实现。
例如，如果 JS 线程需要访问 native modules（例如蓝牙），它就需要向 native 线程发送消息，JS 线程就会通过 Bridge 发送一个 JSON 消息，然后消息在 native 线程上进行解码，最终将执行所需的 native 代码。
而在全新架构中，Bridge 将被 JSI 的模块代替，它是一个轻量级的通用层，用 C++ 编写，JavaScript Engine 可以使用它直接执行或者调用 native。
在 JSI 里 Native 方法会通过 C++ Host Objects 暴露给 JS， 而 JS 可以持有对这些对象的引用，并且使用这些引用直接调用对应的方法。
这就类似于 Web 里 JS 代码可以保存对任何 DOM 元素的引用，并在它上面调用方法：
const container = document.createElement(‘div’);
举个例子，在这里的 container 会包含一些在 C++ 中初始化的 DOM 元素的引用，这时候如果我们调用 container 上的任何方法，它就会调用 DOM 元素上的方法。
JSI 就是以类似的方式运行，JSI 将允许 JS 代码保存对 Native Modules 的引用，并且 JS 可以直接通过引用去调用 Native 上的方法。
Fabric
Fabric 是新的渲染系统，它将取代当前的 UI Manager。
在 Fabric 之前，当 App 运行时，React 会执行你的代码并在 JS 中创建一个 ReactElementTree ，基于这棵树渲染器会在 C++ 中创建一个 ReactShadowTree。
UI Manager 会使用 Shadow Tree 来计算 UI 元素的位置，而一旦 Layout 完成，Shadow Tree 就会被转换为由 Native Elements 组成的 HostViewTree（例如：RN 里的 会变成 Android 中的 ViewGroup 和 iOS 中的 UIView）。
而之前线程之间的通信都发生在 Bridge 上，这就意味着需要在传输和数据复制上耗费时间。
例如如果一个 ReactElementTree 节点恰好是一个
，那么 ReactShadowTree 的节点也会是一个图像，但是这些数据必须被复制并分别存储在两个节点中。
另外由于 JS 和 UI 线程不同步，因此在某些情况下 App 可能会因为丢帧而显得卡顿（例如滚动有大量数据的 FlatList ）
而得益于前面的 JSI， JS 可以直接调用 Native 方法，其实就包括了 UI 方法，所以 JS 和 UI 线程可以同步执行从而提高列表、跳转、手势处理等的性能。
使用新的 Fabric 渲染，用户交互（如滚动、手势等）可以优先在主线程或 Native 线程中同步执行，而 API 请求等其他任务使用异步执行。
另外新的 Shadow Tree 将成为 immutable，它会在 JS 和 UI 线程之间共享，以两端进行直接交互。
在以前 RN 必须维护两个层次结构的 DOM 节点，但因为现在 Shadow Tree 可以共享，在减少内存消耗的部分也会得到相应的优化。
Turbo Modules
在之前的架构中 JS 使用的所有 Native Modules（例如蓝牙、地理位置、文件存储等）都必须在应用程序打开之前进行初始化，这意味着即使用户不需要某些模块，但是它仍然必须在启动时进行初始化。
Turbo Modules 基本上是对这些旧的 Native 模块的增强，正如在前面介绍的那样，现在 JS 将能够持有这些模块的引用，所以 JS 代码可以仅在需要时才加载对应模块，这样可以将显着缩短 RN 应用的启动时间。
Codegen
Codegen 主要是用于保证 JS 代码和 C++ 的 JSI 可以正常通信的静态类型检查器，通过使用类型化的 JS 作为参考来源，CodeGen 将定义可以被 Turbo 模块和 Fabric 使用的接口，另外 Codegen 会在构建时生成 Native 代码，减少运行时的开支。
总结
总结所有改动，新架构将如下所示
- Bridge will be replaced by JSI
- Ability to swap the JavaScriptCore with other Engines
- Complete Interoperability between all threads
- Web-like Rendering system
- Time sensitive tasks can be executed synchronously
- Lazy Loading of Turbo Modules
- Static Type Checking for compatibility between JS and Native Side