React Native 新架构

2025-05-24

React Native 新架构

React Native 宣布发布0.76 版本。此次更新后，新架构将默认启用。在 0.76 版本之前，启用新架构的唯一方式是选择启用。

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

新的 React Native 架构一年多来一直备受关注，而且理由充分。这个新架构也被称为“无桥架构”。为什么叫“无桥架构”？我们将在博客中探讨这个问题。

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

📱 旧建筑回顾

a. 有两种土地 - JavaScript 和 Native。

图片描述

b. 有3个线程：

  • JavaScript 线程（JavaScript）：负责 JavaScript 捆绑代码。
  • Main,UI Native Thread：负责本机模块。
  • 阴影或背景线程（Yoga）：负责布局。

图片描述

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++ 重写的，它带来了两项重大改进：

反应原生

答：JavaScript 和原生层之间无需桥接即可直接通信。正因如此，新架构通常被称为“无桥架构”。

图片描述

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

🧩 新架构的组件：

图片描述

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 会在构建时生成接口（类型）。这是为了在运行时快速执行。

由于Codegen JSI（JavaScript接口）无需任何桥梁即可直接与Turbo模块通信。

4. 新的渲染器

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

图片描述

  1. 性能问题

  2. 空帧（缺少 60FPS）

  3. 此外，旧架构必须维护 Node 和 DOM 的两份副本。这会导致内存问题

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

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

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

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

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

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

  4. 新的渲染器还可以跨不同线程同步读取布局信息。这使得低优先级更新的后台计算和同步读取在必要时成为可能。

🎯 端到端架构

图片描述

🎉 摘要

  1. 从 0.76 开始默认提供新架构

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

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

  4. 新的原生模块是对现有原生模块的改进。它使用 C++ 编写，并具备诸多优势：无需桥接即可实现 JavaScript 与原生模块之间的同步通信，以及延迟加载。

  5. Codegen为 JavaScript 和 C++ 生成类型接口以便相互通信。

  6. 新的渲染器（Fabric）是用 C++ 编写的全新渲染系统。它通过启用多线程和中断低优先级任务来提高性能。

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

  8. 好读GitHub 问题

❤️打招呼！！

叽叽喳喳

YouTube

学习愉快！！

文章来源：https://dev.to/hellonehha/react-native-new-architecture-1hao
Devto 翻译
PREV
前端开发人员的系统设计指南
NEXT
VS Code：生产力