React 18 和 React Native

提醒

本文档仍处于实验阶段，随着我们的迭代，详细信息可能会发生变化。欢迎在此页面分享你对 工作组内部讨论 的反馈。

¥This documentation is still experimental and details are subject to changes as we iterate. Feel free to share your feedback on the discussion inside the working group for this page.

此外，它还包含几个手动步骤。请注意，一旦新架构稳定，这将不代表最终的开发者体验。我们正在开发工具、模板和库，以帮助你快速开始使用新架构，而无需完成整个设置。

¥Moreover, it contains several manual steps. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.

本页介绍了如何使用 React Native 的新架构将 React 18 与 React Native 结合使用。

¥This page describes how to use React 18 with React Native using the React Native's New Architecture.

长话短说：React Native 与 React 18 兼容的第一个版本是 0.69.0。为了使用 React 18 中的新功能（包括自动批处理、startTransition 和 useDeferredValue），你必须将 React Native 应用迁移到新架构。

¥tl;dr: The first version of React Native compatible with React 18 is 0.69.0. In order to use the new features in React 18 including automatic batching, startTransition, and useDeferredValue, you must migrate your React Native app to the New Architecture.

React 18 和 React Native 新架构

¥React 18 and the React Native New Architecture

React 18 引入了 几个新功能，包括：

¥React 18 introduces several new features including:

• 自动批量

  ¥Automatic batching

• 新的严格模式行为

  ¥New Strict Mode behaviors

• 新钩子（useId、useSyncExternalStore）

  ¥New hooks (useId, useSyncExternalStore)

它还包括新的并发功能：

¥It also includes new concurrent features:

• startTransition

• useTransition

• useDeferredValue

• 完整的悬念支持

  ¥Full Suspense support

React 18 中的并发功能构建在新的并发渲染引擎之上。并发渲染是一种新的幕后机制，使 React 能够同时准备多个版本的 UI。

¥The concurrent features in React 18 are built on top of the new concurrent rendering engine. Concurrent rendering is a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time.

以前版本的 React Native 构建在旧架构上，无法支持并发渲染或并发功能。这是因为旧的架构依赖于改变原生树，这不允许 React 同时准备树的多个版本。

¥Previous versions of React Native built on the old architecture cannot support concurrent rendering or concurrent features. This is because the old architecture relied on mutating the native trees, which doesn’t allow for React to prepare multiple versions of the tree at the same time.

幸运的是，新架构是自下而上编写的，考虑到了并发渲染，并且与 React 18 完全兼容。这意味着，为了在你的 React Native 应用中升级到 React 18，你的应用需要使用 React Native 的新架构，包括 Fabric Native 组件和 Turbo Native 模块。

¥Fortunately, the New Architecture was written bottom-up with concurrent rendering in mind, and is fully compatible with React 18. This means, in order to upgrade to React 18 in your React Native app, your application needs to use the React Native's New Architecture including Fabric Native Components and Turbo Native Modules.

这意味着，只要打开新架构开关，你就可以使用 React 18 中的新功能。由于新的并发功能是通过使用 startTransition 或 Suspense 等功能来选择加入的，因此我们预计 React 18 对于迁移到新架构或使用新架构创建新应用的用户来说可以开箱即用，只需进行最小的更改 已启用。

¥This means you’re able to use the new features in React 18 as soon as flip the New Architecture switch. Since the new concurrent features are opt-in by using features like startTransition or Suspense, we expect React 18 to work out-of-the-box with minimal changes for users who migrate to the New Architecture or create a new app with the New Architecture enabled.

旧架构用户须知

¥Note for the Old Architecture users

即使 React 18 在 package.json 文件中被列为依赖，仍使用旧架构的应用也将使用 React 17 模式。

¥Apps that are still on the Old Architecture will use React 17 mode even if React 18 is listed as a dependency in the package.json file.