React Native新架构：告别卡顿，拥抱无桥未来

React Native 已发布 版本 0.76。从这个版本开始，新架构将默认启用。在版本 0.76 之前，唯一的方法是通过手动选择来启用新架构。

这篇博客将介绍新架构里的新特性。

新的 React Native 架构已经备受关注超过一年的时间，而且都是合理的理由。这个新架构也被称为“无桥”架构。为什么取名为“无桥”呢？接下来的博客文章中，我们将探讨这个问题。

在快速回顾一下之前的架构之前，让我们先了解一下新的架构。

有两个地方，一个是JavaScript，另一个是原生环境。

这是一张图片，你可以点击链接查看。

b. 有三条线程，

• JavaScript 线程（JavaScript）：负责 JavaScript 捆绑的代码。
• 主 UI 线程：负责原生模块。
• 影子线程或后台线程（Yoga）：负责布局工作。

（点击链接查看大图）

c. JavaScript和原生代码之间只能通过Bridge进行通信。

d. 任何原生组件，比如 Button 或 Alert，在 JavaScript 层会被序列化成 JSON，并通过桥梁传递到原生线程。在原生线程里，这个 JSON 会被转换成相应的原生组件（例如 iOS 或 Android 原生组件）。

e. 在原生线程里，当原生组件触发事件时，它通过桥将事件（以JSON格式）发送给JavaScript线程。这种方式是异步的，这样桥就能促进JavaScript与原生组件之间的互动。

JavaScript和原生代码之间的通信依赖于桥梁，这也是旧架构的主要限制。

请注意，这是一个图片链接。

1. 性能问题

2. 干巴巴或空洞的画面

   3.: 节点复制

新架构的主要关注点在于解决之前架构存在的问题。其目标如下：

闪电启动 🥳

1. 并发渲染 🎟️

2. 互动应用 🧑‍💻

   4、可以在多个平台上使用 🎮

3. 更少的闪退 🧨

4. 内存管理更牛了 💃

5. 同步 🎢

我们用C++重构了新架构，这带来了两个主要改进之处。

[React原生]

A. 直接在 JavaScript 和原生层之间进行通信，无需桥接。这就是为什么它通常被称为“无桥”架构。

B. 支持多种平台（只要平台是基于 React Native 的。）

（无正文）

🧩 新架构的组成部分：

{.click-这里点击图片查看详细内容}

1. JavaScript 界面 (JSI):

JSI 是 JavaScript 接口层，这是用 C++ 编写的层。任何 JS 引擎都可以使用它，从而实现跨平台支持，不仅限于 iOS 和 Android 平台，还包括智能电视、手表等设备。

JSI 使 JavaScript 能够引用原生模块。这使得 JavaScript 可以直接与原生模块进行通信，同时这也实现了 JavaScript 和原生线程之间的同步通信。

PS：React Native 代码会通过 Metro 打包，然后传递给 JSI。

2. 新的本地模块

新原生模块是对原生模块的改进版本。它是用C++编写，支持JS/TS API同步访问原生代码。这意味着原生和JavaScript线程之间可以直接交互，无需桥接。使用C++还允许编写自定义的原生模块，实现跨平台共享使用。

新推出的原生模块可以处理事件、读取布局，并安排异步或同步更新。

正如我们之前所学，JSI 会保留 TurboModules 中对象的引用，这样可以允许 JavaScript 代码在需要时才加载每个模块（按需加载模块）。这比旧架构要快，可以加快应用的启动时间。

3. 代码生成功能

Codegen 是一个用来生成强类型合约的工具。这些合约对开发人员来说非常有用，可以节省时间，并让不同编程语言间的沟通更顺畅。

在 React Native 中，JavaScript 和 TypeScript 并不是强类型语言，而 C++ 是强类型语言。为了使 JavaScript 和 C++ 之间的通信更顺畅，代码生成器会生成接口（类型）。这些接口在编译时生成，以便在运行时快速执行。

因为 Codegen JSI（JavaScript 接口）可以直接和 Turbo 模块进行通信，而不需要任何桥梁。

4. 新渲染器

新的渲染器叫做Fabric。它也是用 C++ 编写的。
记得React Native中有3个线程吗？- JavaScript，主要/UI线程，和影子线程。在以前的架构中，主要问题在于主线程容易被阻塞，这导致：

1. 性能问题

2. 缺失的帧（缺少60帧每秒）

3. 另外，旧的架构还要同时保存节点和DOM的两个副本。这造成了内存使用上的问题。

   无法中断优先级较低的任务来优先处理紧急的任务或更新。

在 Fabric 中，这些问题已经被解决了。现在有了新的渲染器，我们就可以用 transition 来中断低优先级任务以处理紧急任务。 这将使应用程序保持响应性，并且主/UI线程不会被阻塞。事件将异步执行，新的渲染系统将拥有一个不可变的视图层次树。

不可变意味着它不能被修改。不可变的好处有：

1. 这可以实现对更新的线程安全地处理。

   将会有多个正在进行的树，每个代表不同的界面版本。

2. 因为有多个不同版本的UI，每个版本都有各自的树，*_updates 可以在后台渲染而不会阻塞UI（例如在UI切换期间），或在主线程上进行渲染（例如，当用户进行操作时）。

3. 新的渲染器还可以同步读取布局信息，并在不同线程间共享。这使得后台可以处理低优先级的更新，并在需要时同步读取。

（注：此注释已根据专家建议删除。）

由于根据专家建议需要直接翻译为三个星号，且不需要额外注释，因此最终翻译为：

（最终版本直接使用三个星号，无需额外注释。）

最终翻译应直接为：

这是一张图片

从0.76版本开始，默认提供新架构

1. 新引入的架构包括：JSI（JavaScript 接口），新的原生模块（Turbo Modules），代码生成（codegen），新的渲染引擎（fabric）

2. JSI就是JavaScript接口，基于C++，使JavaScript和原生模块可以直接通信，无需任何桥梁。

3. 新的原生模块是改进的当前原生模块。用 C++ 编写的，带来了诸多好处：无需桥接即可实现 JavaScript 和原生代码之间的同步通信，以及懒加载。

4. Codegen 生成用于 JavaScript ，和 C++ 相互通信所需的类型定义。

5. 新渲染器（Fabric） 是用 C++ 编写的新的渲染引擎。这通过启用多线程来提高性能，同时暂停低优先级任务。

6. 新的事件循环机制 使 React Native 更加接近 DOM

   不错的帖子 GitHub issue

快乐学习吧！