新架构已来

2024年10月23日 ·阅读24分钟

React 团队

@reactjs / @reactnative

默认启用新架构的 React Native 0.76 现已在 npm 上发布！

在0.76 版本发布博客文章中，我们分享了此版本中包含的一系列重大更改。在这篇文章中，我们将概述新架构以及它如何塑造 React Native 的未来。

新架构全面支持现代 React 功能，包括Suspense、Transitions、自动批处理和useLayoutEffect。新架构还包括新的原生模块和原生组件系统，让你能够编写类型安全的代码，直接访问原生接口，而无需桥接。

此版本是自 2018 年以来我们一直致力于的 React Native 彻底重写的成果，我们格外小心，使新架构对大多数应用而言都能逐步迁移。2021 年，我们创建了新架构工作组，与社区协作，确保整个 React 生态系统都能获得顺畅的升级体验。

大多数应用将能够以与任何其他版本相同的精力来采用 React Native 0.76。最流行的 React Native 库已经支持新架构。新架构还包括一个自动互操作层，以实现与针对旧架构的库的向后兼容性。

在过去几年的开发中，我们的团队公开分享了我们对新架构的愿景。如果你错过了这些演讲，请在这里查看

什么是新架构

新架构是支撑 React Native 的主要系统的全面重写，包括组件的渲染方式、JavaScript 抽象与原生抽象的通信方式以及不同线程上的工作调度方式。尽管大多数用户无需考虑这些系统的工作原理，但这些更改带来了改进和新功能。

在旧架构中，React Native 使用异步桥接与原生平台通信。要渲染组件或调用原生函数，React Native 需要通过桥接序列化和排队原生函数调用，这些调用将异步处理。这种架构的优点是主线程永远不会因为渲染更新或处理原生模块函数调用而被阻塞，因为所有工作都在后台线程上完成。

然而，用户期望对交互做出即时反馈，以获得类似原生应用的体验。这意味着某些更新需要同步渲染以响应用户输入，这可能会中断任何正在进行的渲染。由于旧架构仅是异步的，我们需要重写它以允许异步和同步更新。

此外，在旧架构中，通过桥接序列化函数调用很快成为瓶颈，特别是对于频繁更新或大型对象。这使得应用难以可靠地实现 60+ FPS。还存在同步问题：当 JavaScript 和原生层不同步时，无法同步协调它们，导致列表显示空白区域帧和由于中间状态渲染而导致的视觉 UI 跳动等错误。

最后，由于旧架构使用原生层级结构保留了 UI 的单个副本，并原地修改该副本，因此布局只能在单个线程上计算。这使得无法处理紧急更新（例如用户输入），并且无法同步读取布局（例如在布局效果中读取以更新工具提示的位置）。

所有这些问题都意味着无法正确支持 React 的并发功能。为了解决这些问题，新架构包含四个主要部分

新原生模块系统
新渲染器
事件循环
移除桥接

新模块系统允许 React Native 渲染器同步访问原生层，从而使其能够异步和同步处理事件、调度更新和读取布局。新的原生模块默认也采用惰性加载，为应用带来显著的性能提升。

新渲染器可以在多个线程上处理多个正在进行的树，这允许 React 在主线程或后台线程上处理多个并发更新优先级。它还支持同步或异步地从多个线程读取布局，以支持更灵敏的 UI 而不会出现卡顿。

新的事件循环可以按明确定义的顺序在 JavaScript 线程上处理任务。这允许 React 中断渲染以处理事件，以便紧急的用户事件可以优先于优先级较低的 UI 转换。事件循环也符合 Web 规范，因此我们可以支持微任务、MutationObserver 和 IntersectionObserver 等浏览器功能。

最后，移除桥接可以加快启动速度，并实现 JavaScript 与原生运行时之间的直接通信，从而最大限度地降低切换工作的成本。这还可以实现更好的错误报告、调试，并减少由未定义行为导致的崩溃。

新架构现在已可投入生产使用。它已经在 Meta 的 Facebook 应用和其他产品中大规模使用。我们在为Quest 设备开发的 Facebook 和 Instagram 应用中成功使用了 React Native 和新架构。

我们的合作伙伴已经将新架构投入生产使用数月：请查看Expensify和Kraken的成功案例，并尝试Bluesky的新版本。

新原生模块

新的原生模块系统是 JavaScript 和原生平台通信方式的重大重写。它完全用 C++ 编写，这带来了许多新功能

与原生运行时的同步访问
JavaScript 和原生代码之间的类型安全
跨平台代码共享
默认延迟模块加载

在新的原生模块系统中，JavaScript 和原生层现在可以通过 JavaScript 接口 (JSI) 同步通信，而无需使用异步桥接。这意味着你的自定义原生模块现在可以同步调用函数，返回一个值，并将该值传递回另一个原生模块函数。

在旧架构中，为了处理原生函数调用的响应，你需要提供一个回调，并且返回的值需要是可序列化的

// ❌ Sync callback from Native Module
nativeModule.getValue(value => {
  // ❌ value cannot reference a native object
  nativeModule.doSomething(value);
});

在新架构中，你可以同步调用原生函数

// ✅ Sync response from Native Module
const value = nativeModule.getValue();

// ✅ value can be a reference to a native object
nativeModule.doSomething(value);

有了新架构，你终于可以充分利用 C++ 原生实现的强大功能，同时仍然可以从 JavaScript/TypeScript API 访问它。新模块系统支持用 C++ 编写的模块，因此你可以编写一次模块，它可以在所有平台（包括 Android、iOS、Windows 和 macOS）上运行。用 C++ 实现模块可以实现更精细的内存管理和性能优化。

此外，借助Codegen，你的模块可以在 JavaScript 层和原生层之间定义一个强类型契约。根据我们的经验，跨边界类型错误是跨平台应用中最常见的崩溃来源之一。Codegen 让你能够克服这些问题，同时还为你生成样板代码。

最后，模块现在是延迟加载的：它们只在实际需要时才加载到内存中，而不是在启动时加载。这减少了应用启动时间，并随着应用程序复杂性的增长保持其较低水平。

诸如react-native-mmkv等流行库已经从迁移到新原生模块中受益

“新的原生模块大大简化了 react-native-mmkv 的设置、自动链接和初始化。得益于新架构，react-native-mmkv 现在是一个纯 C++ 原生模块，这使得它可以在任何平台上工作。新的 Codegen 允许 MMKV 完全类型安全，通过强制执行空安全解决了长期存在的 NullPointerReference 问题，并且能够同步调用原生模块函数，这使我们能够用新的原生模块 API 替换自定义 JSI 访问。”

Marc Rousavy，react-native-mmkv 的创建者

新渲染器

我们还彻底重写了原生渲染器，增加了多项优势

更新可以在不同线程以不同优先级渲染。
布局可以在不同线程之间同步读取。
渲染器是用 C++ 编写的，并在所有平台之间共享。

更新后的原生渲染器现在将视图层次结构存储在不可变树结构中。这意味着 UI 以不能直接更改的方式存储，从而允许线程安全地处理更新。这使得它能够处理多个进行中的树，每个树代表用户界面的不同版本。因此，更新可以在后台渲染而不会阻塞 UI（例如在过渡期间）或在主线程上渲染（响应用户输入）。

通过支持多个线程，React 可以中断低优先级更新以渲染紧急更新（例如由用户输入生成的更新），然后根据需要恢复低优先级更新。新渲染器还可以同步地跨不同线程读取布局信息。这使得低优先级更新可以在后台计算，并在需要时进行同步读取，例如重新定位工具提示。

最后，用 C++ 重写渲染器使其可以在所有平台之间共享。这确保了相同的代码在 iOS、Android、Windows、macOS 和任何其他 React Native 支持的平台上运行，提供一致的渲染功能，而无需为每个平台重新实现。

这是我们实现多平台愿景的重要一步。例如，视图扁平化是 Android 专属的优化，旨在避免深层布局树。新的渲染器，凭借共享的 C++ 内核，将此功能带到 iOS。此优化是自动的，无需设置，它随共享渲染器免费提供。

通过这些更改，React Native 现在全面支持 Suspense 和 Transitions 等并发 React 功能，从而更容易构建复杂的用户界面，这些界面能够快速响应用户输入，而不会出现卡顿、延迟或视觉跳动。未来，我们将利用这些新功能为 FlatList 和 TextInput 等内置组件带来更多改进。

像Reanimated这样的流行库已经利用了新渲染器

“目前正在开发的 Reanimated 4 引入了一个新的动画引擎，它直接与新渲染器协同工作，使其能够处理动画并管理不同线程上的布局。新渲染器的设计真正使得这些功能无需依赖众多变通方案即可构建。此外，由于它是用 C++ 实现并在各平台共享的，因此 Reanimated 的大部分代码可以一次编写，从而减少平台特定问题，最小化代码库，并简化非树形平台的采用。”

Krzysztof Magiera，Reanimated 的创建者

事件循环

新架构使我们能够实现明确定义的事件循环处理模型，如这篇RFC中所述。此 RFC 遵循HTML 标准中描述的规范，并描述了 React Native 应如何在 JavaScript 线程上执行任务。

实现一个明确定义的事件循环弥合了 React DOM 和 React Native 之间的差距：React Native 应用程序的行为现在更接近 React DOM 应用程序的行为，使其更容易一次学习，随处编写。

事件循环为 React Native 带来了许多好处

中断渲染以处理事件和任务的能力
更紧密地与 Web 规范对齐
更多浏览器功能的基础

借助事件循环，React 能够可预测地排序更新和事件。这允许 React 用紧急用户事件中断低优先级更新，并且新渲染器允许我们独立渲染这些更新。

事件循环还将事件和计时器等任务的行为与 Web 规范对齐，这意味着 React Native 的工作方式更像用户在 Web 中熟悉的那样，并允许 React DOM 和 React Native 之间更好地共享代码。

它还允许实现更符合标准的浏览器功能，如微任务、MutationObserver 和 IntersectionObserver。这些功能尚未在 React Native 中准备好使用，但我们正在努力在未来将它们带给您。

最后，事件循环和新渲染器对支持同步读取布局的更改允许 React Native 正确支持 useLayoutEffect 以同步读取布局信息并在同一帧中更新 UI。这允许您在元素显示给用户之前正确定位元素。

有关更多详细信息，请参阅useLayoutEffect。

移除桥接

在新架构中，我们还完全移除了 React Native 对桥接的依赖，代之以使用 JSI 在 JavaScript 和原生代码之间进行直接、高效的通信

移除桥接通过避免桥接初始化来缩短启动时间。例如，在旧架构中，为了向 JavaScript 提供全局方法，我们需要在启动时在 JavaScript 中初始化一个模块，导致应用程序启动时间略有延迟

// ❌ Slow initialization
import {NativeTimingModule} from 'NativeTimingModule';
global.setTimeout = timer => {
  NativeTimingModule.setTimeout(timer);
};

// App.js
setTimeout(() => {}, 100);

在新架构中，我们可以直接从 C++ 绑定方法

// ✅ Initialize directly in C++
runtime.global().setProperty(runtime, "setTimeout", createTimer);

// App.js
setTimeout(() => {}, 100);

重写还改进了错误报告，特别是针对启动时的 JavaScript 崩溃，并减少了由未定义行为导致的崩溃。如果发生崩溃，新的React Native DevTools简化了调试并支持新架构。

为了向后兼容性，桥接仍然存在，以支持逐步迁移到新架构。未来，我们将完全移除桥接代码。

逐步迁移

我们预计大多数应用程序可以像任何其他版本一样，以相同的精力升级到 0.76。

当你升级到 0.76 时，新架构和 React 18 将默认启用。但是，要使用并发功能并获得新架构的全部优势，你的应用程序和库需要逐步迁移以完全支持新架构。

首次升级时，你的应用程序将在新架构上运行，并与旧架构具有自动互操作层。对于大多数应用程序，这将无需任何更改即可工作，但互操作层存在已知限制，因为它不支持访问自定义 Shadow Node 或并发功能。

要使用并发功能，应用程序还需要按照React 规则更新以支持并发 React。要将 JavaScript 代码迁移到 React 18 及其语义，请遵循React 18 升级指南。

整体策略是在不破坏现有代码的情况下，让你的应用程序在新架构上运行。然后你可以按照自己的节奏逐步迁移你的应用程序。对于所有模块都已迁移到新架构的新界面，你可以立即开始使用并发功能。对于现有界面，你可能需要在添加并发功能之前解决一些问题并迁移模块。

我们与最流行的 React Native 库合作，以确保它们支持新架构。超过 850 个库已经兼容，包括所有每周下载量超过 20 万的库（约占下载库的 10%）。你可以在reactnative.directory网站上查看库与新架构的兼容性

有关升级的更多详细信息，请参阅下面的如何升级。

新功能

新架构在 React Native 中全面支持 React 18、并发功能和 useLayoutEffect。有关 React 18 功能的完整列表，请参阅React 18 博客文章。

Transitions

Transitions 是 React 18 中的一个新概念，用于区分紧急更新和非紧急更新。

紧急更新反映直接交互，如打字和按压。
过渡更新将 UI 从一个视图过渡到另一个视图。

紧急更新需要立即响应，以符合我们对物理对象行为的直觉。然而，过渡有所不同，因为用户不期望在屏幕上看到每个中间值。在新架构中，React Native 能够支持分别渲染紧急更新和过渡更新。

通常，为了获得最佳用户体验，单个用户输入应该同时导致紧急更新和非紧急更新。与 ReactDOM 类似，press 或 change 等事件被视为紧急事件并立即渲染。你可以在输入事件中使用 startTransition API 来通知 React 哪些更新是“过渡”，可以推迟到后台处理

import {startTransition} from 'react';

// Urgent: Show the slider value
setCount(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setNumberOfTiles(input);
});

将紧急事件与过渡分离可以实现更灵敏的用户界面和更直观的用户体验。

以下是没有过渡的旧架构和有过渡的新架构的比较。想象一下，每个瓷砖都不是一个带有背景色的简单视图，而是一个包含图像和其他昂贵渲染组件的丰富组件。使用 useTransition 后，你可以避免应用程序因更新过多而崩溃并滞后。

A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. — **之前：**不标记为过渡的瓷砖渲染。

有关更多信息，请参阅支持并发渲染器和功能。

自动批处理

升级到新架构时，你将受益于 React 18 的自动批处理。

自动批处理允许 React 在渲染时将更多状态更新批处理在一起，以避免渲染中间状态。这使得 React Native 更快，更不容易出现卡顿，而无需开发人员编写任何额外的代码。

A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. — **之前：**使用旧版渲染器渲染频繁的状态更新。

A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. — **之后：**使用*自动批处理*渲染频繁的状态更新。

在旧架构中，渲染了更多的中间状态，即使滑块停止移动，UI 也会不断更新。新架构渲染的中间状态更少，并且由于自动批处理更新，渲染完成得更快。

有关更多信息，请参阅支持并发渲染器和功能。

useLayoutEffect

基于事件循环和同步读取布局的能力，在新架构中，我们添加了对 React Native 中 useLayoutEffect 的适当支持。

在旧架构中，你需要使用异步的 onLayout 事件来读取视图的布局信息（这也是异步的）。因此，至少有一帧的布局是不正确的，直到布局被读取和更新，导致工具提示放置位置不正确等问题

// ❌ async onLayout after commit
const onLayout = React.useCallback(event => {
  // ❌ async callback to read layout
  ref.current?.measureInWindow((x, y, width, height) => {
    setPosition({x, y, width, height});
  });
}, []);

// ...
<ViewWithTooltip
  onLayout={onLayout}
  ref={ref}
  position={position}
/>;

新架构通过允许在 useLayoutEffect 中同步访问布局信息来解决此问题

// ✅ sync layout effect during commit
useLayoutEffect(() => {
  // ✅ sync call to read layout
  const rect = ref.current?.getBoundingClientRect();
  setPosition(rect);
}, []);

// ...
<ViewWithTooltip ref={ref} position={position} />;

此更改允许你同步读取布局信息并在同一帧中更新 UI，从而允许你在元素显示给用户之前正确定位元素

A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves — 在旧架构中，布局在 `onLayout` 中异步读取，导致工具提示的位置延迟。

A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. — 在新架构中，布局可以在 `useLayoutEffect` 中同步读取，在显示之前更新工具提示位置。

有关更多信息，请参阅同步布局和效果文档。

全面支持 Suspense

Suspense 允许你声明性地指定组件树的某个部分的加载状态，如果它尚未准备好显示

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

我们几年前引入了有限版本的 Suspense，React 18 添加了全面支持。直到现在，React Native 才能支持 Suspense 的并发渲染。

新架构全面支持 React 18 中引入的 Suspense。这意味着你现在可以在 React Native 中使用 Suspense 来处理组件的加载状态，并且暂停的内容将在后台渲染，同时显示加载状态，从而优先处理可见内容上的用户输入。

有关更多信息，请参阅React 18 中 Suspense 的 RFC。

如何升级

要升级到 0.76，请按照发布文章中的步骤进行操作。由于此版本还升级到 React 18，你还需要遵循React 18 升级指南。

由于与旧架构的互操作层，这些步骤应该足以让大多数应用程序升级到新架构。但是，要充分利用新架构并开始使用并发功能，你需要将自定义原生模块和原生组件迁移以支持新的原生模块和原生组件 API。

如果不迁移自定义原生模块，你将无法获得共享 C++、同步方法调用或 Codegen 提供的类型安全的好处。如果不迁移原生组件，你将无法使用并发功能。我们建议尽快将所有原生组件和原生模块迁移到新架构。

注意

在未来的版本中，我们将移除互操作层，模块将需要支持新架构。

应用程序

如果你是应用程序开发人员，为了完全支持新架构，你需要升级你的库、自定义原生组件和自定义原生模块以完全支持新架构。

我们与最流行的 React Native 库合作，以确保它们支持新架构。你可以在reactnative.directory网站上查看库与新架构的兼容性。

如果你应用程序依赖的任何库尚未兼容，你可以

向库提交问题，并要求作者迁移到新架构。
如果库未维护，请考虑具有相同功能的替代库。
在这些库迁移期间选择退出新架构。

如果你的应用程序有自定义原生模块或自定义原生组件，我们预计它们会正常工作，这要归功于我们的互操作层。但是，我们建议将它们升级到新的原生模块和原生组件 API，以完全支持新架构并采用并发功能。

请遵循以下指南将你的模块和组件迁移到新架构

库

如果你是库维护者，请首先测试你的库是否与互操作层协同工作。如果不行，请在新架构工作组上提交问题。

为了完全支持新架构，我们建议尽快将你的库迁移到新的原生模块和原生组件 API。这将允许你的库的用户充分利用新架构并支持并发功能。

你可以遵循这些指南将你的模块和组件迁移到新架构

选择退出

如果由于任何原因，新架构在你的应用程序中表现不佳，你始终可以选择退出，直到你准备好再次启用它。

要选择退出新架构

在 Android 上，修改 android/gradle.properties 文件并关闭 newArchEnabled 标志

-newArchEnabled=true
+newArchEnabled=false

在 iOS 上，你可以通过运行以下命令重新安装依赖项

RCT_NEW_ARCH_ENABLED=0 bundle exec pod install

致谢

向开源社区交付新架构是一项巨大的努力，我们为此进行了数年的研究和开发。我们想花点时间感谢所有帮助我们实现这一成果的 React 团队的现有和过去成员。

我们也非常感谢所有与我们合作实现此目标的合作伙伴。特别是，我们想点名表扬

Expo，感谢他们早期采用新架构，并支持迁移最流行的库。
Software Mansion，感谢他们维护生态系统中关键库，早期将其迁移到新架构，以及在调查和修复各种问题方面提供的所有帮助。
Callstack，感谢他们维护生态系统中关键库，早期将其迁移到新架构，以及在社区 CLI 工作中提供的支持。
Microsoft，感谢他们为 react-native-windows 和 react-native-macos 以及其他几个开发工具添加了新架构实现。
Expensify、Kraken、Bluesky 和Brigad，感谢他们率先采用新架构并报告各种问题，以便我们能够为其他人解决这些问题。
所有独立库维护者和开发人员，感谢他们通过测试新架构、修复一些问题以及提出不清楚的问题，帮助我们澄清这些问题，从而为新架构做出了贡献。

什么是新架构​

新原生模块​

新渲染器​

事件循环​

移除桥接​

逐步迁移​

新功能​

Transitions​

自动批处理​

useLayoutEffect​

全面支持 Suspense​

如何升级​

应用程序​

库​

选择退出​

致谢​