React Native 新架构

React Native 宣布发布 0.76 版本。通过此更新，新架构现在将默认启用。在版本 0.76 之前，启用新架构的唯一方法是选择加入。

本博客将重点介绍新架构中的新增内容。

新的 React Native 架构已经成为头条新闻一年多了，并且有充分的理由。这种新架构也称为“无桥”。为什么叫无桥？我们将在博客中探讨这一点。”

在探索新架构之前，让我们快速回顾一下之前的架构。

？旧建筑回顾

a.有两个领域——JavaScript 和 Native。

b.有 3 个主题：

• JavaScript Thread (JavaScript)：负责 JavaScript 捆绑代码。
• 主，UI 本机线程：负责本机模块。
• 阴影，或背景线程（瑜伽）：负责布局。

c. JavaScript 和 Native 代码相互通信的唯一方式是通过 Bridge。

d.任何本机组件（例如 Button 或 Alert）都会在 JavaScript 层中序列化为 JSON，并通过桥发送到本机线程。在本机线程中，此 JSON 随后会转换为本机（iOS 或 Android）组件。

e.在本机线程中，当本机组件上发生事件时，它会通过桥将事件以 JSON 形式发送到 JavaScript 线程。这种通信是异步的，使桥能够促进 JavaScript 和本机组件之间的交互。

？旧架构的问题

JavaScript 和本机层之间的通信依赖于桥，这是旧架构的主要限制。

1. 性能问题

2. 干涩或空帧

3. 节点的重复

✨ 新架构的目标

新架构专注于解决前一个架构的挑战。其目标是：

1. 快速启动？

2. 并发渲染？️

3. 响应式应用程序 ?‍?

4. 支持多个平台？

5. 减少崩溃？

6. 更好的内存管理？

7. 同步执行？

？新架构

新架构是用 C 重写的，它带来了两项重大改进：

A. JavaScript 和本机层之间无需桥梁即可直接通信。这就是为什么新架构通常被称为“无桥”。

B.支持多平台（只要平台使用React Native）

---

？新架构的组成部分：

1。 JavaScript 接口 (JSI)

JSI是JavaScript Interface，这是用C编写的层。任何 JS 引擎都可以与此一起使用，这可以实现跨平台支持 - 不仅在 IOS、Android 上，还可以在智能电视、智能手表等上。

JSI 使 JavaScript 能够保存对本机模块的引用。这些使得 JavaScript 能够直接与本机模块通信，并且这使得 JavaScript 和本机线程之间能够同步通信

PS：你的 React Native 代码通过 Metro 进行捆绑并进入 JSI。

2。新的本机模块

New Native Modules 是新的和改进的本机模块。这是用 C 编写的，它可以实现从 JS/TS api 到 Native 的同步访问。这意味着Native 和 JavaScript 线程之间将直接通信，而不需要桥接。 C 还可以编写您自己的本机模块以进行跨平台共享。

新的本机模块允许处理事件、读取布局、安排异步和同步更新。

正如我们之前了解到的，JSI 保留 TurboModule 中对象的引用，这将允许 JavaScript 代码仅在需要时加载每个模块（动态加载模块）。与旧架构相比，这缩短了应用程序的启动时间。

3。代码生成

Codegen 是一个创建强类型合约的工具。这些合约有助于开发人员节省时间，并使跨编程语言之间的通信更容易。

在 React Native 中，JavaScript 和 Typescript 不是强类型语言，但 C 是强类型语言。为了在 JavaScript 和 C 之间进行通信，codegen 生成接口（类型）。这发生在构建时，以便在运行时快速执行。

因为Codegen JSI（JavaScript Interface）直接与Turbo模块通信，无需任何桥梁。

4。新渲染器

新渲染器被称为 Fabric。这也是用 C 编写的。
还记得 React Native 中有 3 个线程吗？ - JavaScript、主/UI 本机和影子/后台线程。在旧架构中，问题是我们的主线程被阻塞，这导致：

1. 性能问题

2. 空帧（缺少 60FPS）

3. 此外，旧架构必须维护节点和 DOM 的 2 个副本。这会导致内存问题

4. 无法中断低优先级任务来优先处理紧急更新。

在 Fabric 中这些问题都得到了解决。现在，使用新的渲染器，我们可以使用转换来中断紧急的低优先级任务。这将使应用程序响应良好，并且主/UI 本机线程不会被解锁。事件将异步执行。 使用新的渲染器系统，将有一个不可变的视图层次结构树。

不可变意味着它不会改变。不可变的好处：

1. 这允许线程安全的更新处理。

2. 这也意味着将会有多个正在进行的树，每个树代表不同版本的用户界面。

3. 由于不同版本的 UI 有多个树，*更新可以在后台渲染，而不会阻塞 UI *（例如在转换期间）或在主线程上（作为响应）用户输入）

4. 新的渲染器还可以同步读取布局信息并跨不同线程。这可以在需要时启用低优先级更新和同步读取的后台计算。

---

？端到端架构

？概括

1. 新架构从 0.76 开始默认可用

2. 引入了新架构：JavaScript 接口 (JSI)、新原生模块（Turbo 模块）、codegen、新渲染器系统（面料）

3. JSI 是 JavaScript 接口它基于 C，使 JavaScript 和 Native 模块可以直接通信，无需任何 Bridge

4. 新的原生模块是改进的当前原生模块。用 C 编写，具有很多好处：与 JavaScript 和本机进行同步通信，无需桥接，延迟加载。

5. Codegen 生成 JavaScript 和 C 相互通信的类型接口。

6. 新渲染器（Fabric） 是用 C 编写的新渲染器系统。这可以通过启用多线程并中断低优先级任务来实现更好的性能。

7. 新的事件循环使React Native更加接近DOM

8. 好好阅读 GitHub 问题

快乐学习！！

以上是React Native 新架构的详细内容。更多信息请关注PHP中文网其他相关文章！