React Native 新架构 (一)

主要有两个大的功能变动。第一个是新架构会默认使用的 Hermes 引擎 ，第二个是新架构的 Fabric 渲染流水线。

Hermes 引擎

相对于 React Native 老架构采用的 JavaScript Core 引擎， Hermes 引擎是专门为移动端打造的。新架构默认集成的 Hermes 引擎性能更好。

老架构 JSC 引擎

• React Native 的老架构默认用的是 JavaScriptCore。JavaScriptCore 也叫做 JSC，它采用的是 JIT 的即时编译方案。
• 因为 JSC 引擎执行代码的过程是编译一段执行一段，再编译一段再执行一段，这种一边编 译一边执行的方式就叫做 JIT 即时编译。
• 使用 JSC 这类 JIT 即时编译引擎，下发的依旧是 JavaScript 代码。需要先将 JavaScript 代码编译为字节码，然后再编译为机器码。

新架构 Hermes 引擎

• Hermes 引擎的思路是，在本地先将 JavaScript 编译为字节码，然后再下发字节码。
• Hermes 引擎下发的字节码的体积和 JSC 引擎下发的 JavaScript 代码是一样大的，但 Hermes 引擎执行字节码的首屏性能，却是 JSC 引擎执行 JavaScript 首屏性能的 2 倍以 上。

Fabric 渲染器

老架构通信 JSBridge

• JSBridge 的作用是通过消息通知的形式，实现 JavaScript 和 C++ 之间的相互调用。
• 消息通知形式中的消息，其实是一个字符串数组，这个字符串数组中包含了一系列的操作命令和操作参数。但字符串数组不能直接生成、也不能直接用，它有个序列化和反序列的过程，这个过程既浪费了时间、也浪费了内存。

新架构通信 JSI

• 新架构中已经把 JSBridge 这种消息通知形式改为 JSI（JavaScript Interface）。有了 JSI 后，React Native 中的 JavaScript 就直接调用 C++ 了，在 JavaScript 和 C++ 通信这一层的性能也是提升了 3 倍左右。
• 更容易保持跨平台一致性。原来的 Shadow Tree、布局逻辑、视图拍平都是在各个平台单独实现的，现在新架构把这些用 Java/OC 代码实现的逻辑放到了 C++ 层。
• 拥有优先处理紧急任务的能力。新架构集成 React18 的 Concurrent 并发模型，并发模型可以让优先级更高的渲染任务先执行，优先级低的渲染任务可以中断或批量渲染。

React Native CSR 和 React Native SSR

客户端渲染 CSR 渲染的步骤分为 6 步：

• 1. 请求服务端获取最新的 Bundle 资源地址；
• 2. 通过返回的资源地址，下载 Bundle 资源，也就是 JavaScript 代码；
• 3. 初始化 JavaScript 引擎和 Native 模块；
• 4. 执行 JavaScript 代码，生成空页面；
• 5. 与此同时发起业务请求，请求最新的业务数据；
• 6. 业务数据回来后重新渲染，生成最终的页面。

服务端渲染 SSR 渲染其实是对 CSR 渲染的步骤的重组，整体也是 6 步：

• 1. 并行请求 Tree，和最新的 Bundle 资源地址；
• 2. 初始化 Native 模块，同时开启后台线程并行请求 Bundle 资源；
• 3. 使用 Tree 文件，通过 Fabric 渲染器渲染首屏页面。这里画个重点，此时用户已经可以 看到业务页面了；
• 4. 然后再初始化 JavaScript 引擎，开始执行 JavaScript 代码；
• 5. 这一步有个专有名词叫做 Hyration。大致的意思原来通过 Tree 生成的页面是不可交互 的"静态"页面，这时需要通过执行 JavaScript，生成一个有交互的"动态"页面，把 原来的"静态"页面替换掉；
• 6. 替换后的页面，就是可以交互"动态"页面了。