React v18.0

2022年3月29日 由 React 团队 发布

🌐 March 29, 2022 by The React Team

我们最新的主要版本包括开箱即用的改进，例如自动批处理、新的 API（如 startTransition）以及支持 Suspense 的流式服务端渲染。

🌐 Our latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense.

React 18 中的许多特性都是建立在我们新的并发渲染器之上的，这是一项幕后变化，解锁了强大的新功能。并发 React 是可选择的 —— 只有在使用并发特性时才会启用 —— 但我们认为它将对人们构建应用的方式产生重大影响。

🌐 Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in — it’s only enabled when you use a concurrent feature — but we think it will have a big impact on the way people build applications.

我们花了多年时间研究和开发 React 中的并发支持，并且我们格外注意为现有用户提供渐进式的采用路径。去年夏天，我们成立了 React 18 工作组，以收集社区专家的反馈，并确保整个 React 生态系统的升级体验顺利。

🌐 We’ve spent years researching and developing support for concurrency in React, and we’ve taken extra care to provide a gradual adoption path for existing users. Last summer, we formed the React 18 Working Group to gather feedback from experts in the community and ensure a smooth upgrade experience for the entire React ecosystem.

以防你遗漏，我们在 2021 年的 React 大会分享了很多关于这个愿景的内容：

🌐 In case you missed it, we shared a lot of this vision at React Conf 2021:

• 在主题演讲中，我们解释了 React 18 如何融入我们的使命，使开发者能够轻松构建出优秀的用户体验
• Shruti Kapoor 演示了如何使用 React 18 中的新功能
• Shaundai Person 向我们概述了 带 Suspense 的流式服务器渲染

以下是此版本中可以预期内容的完整概述，从并发渲染开始。

🌐 Below is a full overview of what to expect in this release, starting with Concurrent Rendering.

什么是并发 React？

🌐 What is Concurrent React?

React 18 中最重要的新增功能是我们希望你永远不必去考虑的东西：并发。我们认为这对应用开发者来说在很大程度上是如此，尽管对库维护者来说情况可能会更复杂一些。

🌐 The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for library maintainers.

并发本身并不是一个特性。它是一种新的幕后机制，使 React 能够同时准备你 UI 的多个版本。你可以将并发视为一种实现细节——它有价值是因为它开启了许多功能。React 在内部实现中使用了复杂的技术，例如优先级队列和多缓冲。但你在我们的公共 API 中不会看到这些概念。

🌐 Concurrency is not a feature, per se. It’s a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it’s valuable because of the features that it unlocks. React uses sophisticated techniques in its internal implementation, like priority queues and multiple buffering. But you won’t see those concepts anywhere in our public APIs.

当我们设计 API 时，我们尽量对开发者隐藏实现细节。作为一个 React 开发者，你关注的是你希望用户体验看起来像什么，而 React 负责处理如何实现这种体验。因此，我们不期望 React 开发者了解底层的并发运作方式。

🌐 When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on what you want the user experience to look like, and React handles how to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood.

然而，并发 React 比典型的实现细节更重要——它是对 React 核心渲染模型的基础性更新。所以虽然了解并发的工作原理不是特别重要，但了解它的概念性内容可能是值得的。

🌐 However, Concurrent React is more important than a typical implementation detail — it’s a foundational update to React’s core rendering model. So while it’s not super important to know how concurrency works, it may be worth knowing what it is at a high level.

并发 React 的一个关键特性是渲染是可中断的。当你首次升级到 React 18 时，在添加任何并发特性之前，更新的渲染方式与之前版本的 React 相同——以单一、连续、同步的事务进行渲染。在同步渲染中，一旦更新开始渲染，直到用户在屏幕上看到结果之前，没有任何东西可以中断它。

🌐 A key property of Concurrent React is that rendering is interruptible. When you first upgrade to React 18, before adding any concurrent features, updates are rendered the same as in previous versions of React — in a single, uninterrupted, synchronous transaction. With synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on screen.

在并发渲染中，情况并非总是如此。React 可能会开始渲染一个更新，然后在中途暂停，稍后再继续。它甚至可能完全放弃一个正在进行的渲染。React 保证即使渲染被中断，用户界面也会保持一致。为了实现这一点，它会等到整个树评估完成后再进行 DOM 操作。凭借这一能力，React 可以在后台准备新的屏幕，而不会阻塞主线程。这意味着即使在进行大型渲染任务的过程中，用户界面仍然可以立即响应用户输入，从而创建流畅的用户体验。

🌐 In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later. It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted. To do this, it waits to perform DOM mutations until the end, once the entire tree has been evaluated. With this capability, React can prepare new screens in the background without blocking the main thread. This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience.

另一个例子是可重用状态。并发 React 可以从屏幕上移除某些 UI 部分，然后在稍后将它们重新添加回去，同时重用之前的状态。例如，当用户从一个屏幕切换到另一屏幕后再返回，React 应该能够以之前的状态恢复先前的屏幕。在即将发布的小版本中，我们计划添加一个名为 <Offscreen> 的新组件，它实现了这一模式。类似地，你也可以使用 Offscreen 在后台准备新的 UI，以便在用户显示它之前已经准备好。

🌐 Another example is reusable state. Concurrent React can remove sections of the UI from the screen, then add them back later while reusing the previous state. For example, when a user tabs away from a screen and back, React should be able to restore the previous screen in the same state it was in before. In an upcoming minor, we’re planning to add a new component called <Offscreen> that implements this pattern. Similarly, you’ll be able to use Offscreen to prepare new UI in the background so that it’s ready before the user reveals it.

并发渲染是 React 中一个强大的新工具，我们的大多数新功能都是为了利用它而构建的，包括 Suspense、过渡以及流式服务器渲染。但 React 18 只是我们在这个新基础上构建目标的开始。

🌐 Concurrent rendering is a powerful new tool in React and most of our new features are built to take advantage of it, including Suspense, transitions, and streaming server rendering. But React 18 is just the beginning of what we aim to build on this new foundation.

逐步采用并发特性

🌐 Gradually Adopting Concurrent Features

从技术上讲，并发渲染是一个重大更改。因为并发渲染是可中断的，当启用它时，组件的行为会略有不同。

🌐 Technically, concurrent rendering is a breaking change. Because concurrent rendering is interruptible, components behave slightly differently when it is enabled.

在我们的测试中，我们已经将数千个组件升级到 React 18。我们发现几乎所有现有组件在并发渲染下“都能正常工作”，无需任何更改。然而，其中一些组件可能需要一些额外的迁移工作。尽管这些更改通常很小，但你仍然可以以自己的节奏进行修改。React 18 中的新渲染行为仅在应用中使用新功能的部分启用。

🌐 In our testing, we’ve upgraded thousands of components to React 18. What we’ve found is that nearly all existing components “just work” with concurrent rendering, without any changes. However, some of them may require some additional migration effort. Although the changes are usually small, you’ll still have the ability to make them at your own pace. The new rendering behavior in React 18 is only enabled in the parts of your app that use new features.

整体升级策略是让你的应用在不破坏现有代码的情况下运行在 React 18 上。然后，你可以根据自己的节奏逐步开始添加并发功能。你可以使用 <StrictMode> 来帮助在开发过程中暴露与并发相关的错误。严格模式不会影响生产环境的行为，但在开发过程中，它会记录额外的警告并对预计为幂等的函数进行双重调用。它无法捕获所有问题，但在防止最常见类型的错误方面非常有效。

🌐 The overall upgrade strategy is to get your application running on React 18 without breaking existing code. Then you can gradually start adding concurrent features at your own pace. You can use <StrictMode> to help surface concurrency-related bugs during development. Strict Mode doesn’t affect production behavior, but during development it will log extra warnings and double-invoke functions that are expected to be idempotent. It won’t catch everything, but it’s effective at preventing the most common types of mistakes.

在升级到 React 18 后，你将能够立即开始使用并发功能。例如，你可以使用 startTransition 在屏幕之间导航而不会阻塞用户输入。或者使用 useDeferredValue 来限制高开销的重新渲染。

🌐 After you upgrade to React 18, you’ll be able to start using concurrent features immediately. For example, you can use startTransition to navigate between screens without blocking user input. Or useDeferredValue to throttle expensive re-renders.

然而，从长期来看，我们预计你为应用增加并发性的主要方式是使用支持并发的库或框架。在大多数情况下，你不会直接与并发 API 交互。例如，开发者在导航到新屏幕时不需要调用 startTransition，路由库会自动将导航操作封装在 startTransition 中。

🌐 However, long term, we expect the main way you’ll add concurrency to your app is by using a concurrent-enabled library or framework. In most cases, you won’t interact with concurrent APIs directly. For example, instead of developers calling startTransition whenever they navigate to a new screen, router libraries will automatically wrap navigations in startTransition.

库升级以支持并发可能需要一些时间。我们提供了新的 API，以便库更容易利用并发功能。与此同时，请对维护者保持耐心，因为我们正在逐步迁移 React 生态系统。

🌐 It may take some time for libraries to upgrade to be concurrent compatible. We’ve provided new APIs to make it easier for libraries to take advantage of concurrent features. In the meantime, please be patient with maintainers as we work to gradually migrate the React ecosystem.

欲了解更多信息，请参见我们之前的文章：如何升级到 React 18。

🌐 For more info, see our previous post: How to upgrade to React 18.

数据框架中的Suspense

🌐 Suspense in Data Frameworks

在 React 18 中，你可以开始在像 Relay、Next.js、Hydrogen 或 Remix 这样的有明确设计理念的框架中使用 Suspense 进行数据获取。使用 Suspense 进行临时的数据获取在技术上是可能的，但作为一般策略仍不推荐。

🌐 In React 18, you can start using Suspense for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.

未来，我们可能会提供更多原语，这可能会让通过 Suspense 访问你的数据变得更容易，也许无需使用有特定意见的框架。然而，Suspense 在深度整合到你的应用架构中时效果最佳：你的路由、数据层以及服务器渲染环境。因此，即使从长期来看，我们仍预计库和框架将在 React 生态系统中发挥关键作用。

🌐 In the future, we may expose additional primitives that could make it easier to access your data with Suspense, perhaps without the use of an opinionated framework. However, Suspense works best when it’s deeply integrated into your application’s architecture: your router, your data layer, and your server rendering environment. So even long term, we expect that libraries and frameworks will play a crucial role in the React ecosystem.

和之前版本的 React 一样，你也可以使用 Suspense 与 React.lazy 在客户端进行代码拆分。但我们对 Suspense 的愿景一直远不止于加载代码——目标是扩展对 Suspense 的支持，以便最终相同的声明式 Suspense 回退可以处理任何异步操作（加载代码、数据、图片等）。

🌐 As in previous versions of React, you can also use Suspense for code splitting on the client with React.lazy. But our vision for Suspense has always been about much more than loading code — the goal is to extend support for Suspense so that eventually, the same declarative Suspense fallback can handle any asynchronous operation (loading code, data, images, etc).

服务器组件仍在开发中

🌐 Server Components is Still in Development

服务器组件 是一个即将推出的功能，允许开发者构建跨服务器和客户端的应用，将客户端应用的丰富交互性与传统服务器渲染的性能提升相结合。服务器组件本质上并不依赖于并发 React，但它被设计为与像 Suspense 和流式服务器渲染这样的并发特性最佳配合。

服务器组件仍然是实验性的，但我们预计将在 18.x 的小版本中发布初始版本。与此同时，我们正在与 Next.js、Hydrogen 和 Remix 等框架合作推进该提案，并为广泛采用做好准备。

🌐 Server Components is still experimental, but we expect to release an initial version in a minor 18.x release. In the meantime, we’re working with frameworks like Next.js, Hydrogen, and Remix to advance the proposal and get it ready for broad adoption.

React 18 的新特性

🌐 What’s New in React 18

新功能：自动批处理

🌐 New Feature: Automatic Batching

批处理是指 React 将多个状态更新组合到一次重新渲染中以提高性能。在没有自动批处理的情况下，我们只会在 React 事件处理程序内部进行批处理。在 Promise、setTimeout、本地事件处理程序或任何其他事件中的更新默认情况下不会在 React 中进行批处理。使用自动批处理时，这些更新将会自动批处理：

🌐 Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically:

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

更多信息，请参阅这篇关于 React 18 中自动批处理以减少渲染 的文章。

🌐 For more info, see this post for Automatic batching for fewer renders in React 18.

新功能：过渡效果

🌐 New Feature: Transitions

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

🌐 A transition is a new concept in React to distinguish between urgent and non-urgent updates.

• 紧急更新 反映直接交互，如打字、点击、按压等。
• 过渡更新 将用户界面从一个视图过渡到另一个视图。

紧急更新如输入、点击或按压，需要立即响应，以符合我们对物理对象行为的直觉。否则会感觉“错误”。然而，过渡不同，因为用户不期望在屏幕上看到每一个中间值。

🌐 Urgent updates like typing, clicking, or pressing, need immediate response to match our intuitions about how physical objects behave. Otherwise they feel “wrong”. However, transitions are different because the user doesn’t expect to see every intermediate value on screen.

例如，当你在下拉菜单中选择一个筛选器时，你希望点击时筛选按钮本身能够立即响应。然而，实际结果可能会单独过渡。一个小的延迟是难以察觉的，而且通常是可以预期的。如果你在结果完成渲染之前再次更改筛选器，你只关心看到最新的结果。

🌐 For example, when you select a filter in a dropdown, you expect the filter button itself to respond immediately when you click. However, the actual results may transition separately. A small delay would be imperceptible and often expected. And if you change the filter again before the results are done rendering, you only care to see the latest results.

通常，为了获得最佳的用户体验，单个用户输入应该同时产生紧急更新和非紧急更新。你可以在输入事件中使用 startTransition API 来告知 React 哪些更新是紧急的，哪些是“过渡”更新。

🌐 Typically, for the best user experience, a single user input should result in both an urgent update and a non-urgent one. You can use startTransition API inside an input event to inform React which updates are urgent and which are “transitions”:

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

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

包含在 startTransition 中的更新被处理为非紧急更新，如果有更紧急的更新（比如点击或按键）出现，会被中断。如果过渡被用户中断（例如，连续输入多个字符），React 将丢弃未完成的过时渲染工作，只渲染最新的更新。

🌐 Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.

• useTransition：一个用于启动转换的 Hook，包括一个用于跟踪待处理状态的值。
• startTransition：一种在无法使用 Hook 时启动过渡的方法。

过渡将选择加入并发渲染，这允许更新被中断。如果内容再次挂起，过渡还会告诉 React 在后台渲染过渡内容的同时继续显示当前内容（更多信息请参见 Suspense RFC）。

🌐 Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the Suspense RFC for more info).

请参阅此处的过渡文档。

新的悬疑功能

🌐 New Suspense Features

Suspense 让你以声明式方式为组件树的一部分指定加载状态，如果它尚未准备好显示的话：

🌐 Suspense lets you declaratively specify the loading state for a part of the component tree if it’s not yet ready to be displayed:

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

Suspense 使“UI 加载状态”成为 React 编程模型中的一等声明式概念。这让我们能够在其之上构建更高级的功能。

🌐 Suspense makes the “UI loading state” a first-class declarative concept in the React programming model. This lets us build higher-level features on top of it.

几年前，我们推出了 Suspense 的有限版本。然而，唯一支持的用例是与 React.lazy 一起进行代码拆分，并且在服务器端渲染时根本不支持。

🌐 We introduced a limited version of Suspense several years ago. However, the only supported use case was code splitting with React.lazy, and it wasn’t supported at all when rendering on the server.

在 React 18 中，我们增加了对服务器端 Suspense 的支持，并利用并发渲染功能扩展了其能力。

🌐 In React 18, we’ve added support for Suspense on the server and expanded its capabilities using concurrent rendering features.

在 React 18 中，Suspense 在与过渡（transition）API 结合使用时效果最佳。如果在过渡期间使用 Suspense，React 将阻止已可见的内容被回退内容替换。相反，React 会延迟渲染，直到加载了足够的数据以避免出现不良的加载状态。

🌐 Suspense in React 18 works best when combined with the transition API. If you suspend during a transition, React will prevent already-visible content from being replaced by a fallback. Instead, React will delay the render until enough data has loaded to prevent a bad loading state.

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

🌐 For more, see the RFC for Suspense in React 18.

新的客户端和服务器渲染 API

🌐 New Client and Server Rendering APIs

在此版本中，我们抓住机会重新设计了我们为客户端和服务器端渲染提供的 API。这些更改允许用户在升级到 React 18 的新 API 时，继续在 React 17 模式下使用旧的 API。

🌐 In this release we took the opportunity to redesign the APIs we expose for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.

React DOM 客户端

🌐 React DOM Client

这些新的 API 现在从 react-dom/client 导出：

🌐 These new APIs are now exported from react-dom/client:

• createRoot：创建 render 或 unmount 根的新方法。使用它替代 ReactDOM.render。没有它，React 18 的新功能无法使用。
• hydrateRoot：为服务器渲染的应用提供新方法进行 hydration。将其与新的 React DOM Server API 一起使用，以替代 ReactDOM.hydrate。React 18 中的新功能如果不使用它将无法工作。

createRoot 和 hydrateRoot 都接受一个名为 onRecoverableError 的新选项，以防你希望在 React 在渲染或 hydration 过程中从错误中恢复时收到通知以进行日志记录。默认情况下，React 将使用 reportError，或者在较老的浏览器中使用 console.error。

🌐 Both createRoot and hydrateRoot accept a new option called onRecoverableError in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use reportError, or console.error in the older browsers.

在此查看 React DOM 客户端文档。

React DOM 服务器

🌐 React DOM Server

这些新的 API 现在从 react-dom/server 导出，并且完全支持服务器端的流式 Suspense：

🌐 These new APIs are now exported from react-dom/server and have full support for streaming Suspense on the server:

• renderToPipeableStream：用于在 Node 环境中进行流处理。
• renderToReadableStream：对于现代边缘运行时环境，例如 Deno 和 Cloudflare workers。

现有的 renderToString 方法仍然可用，但不推荐使用。

🌐 The existing renderToString method keeps working but is discouraged.

在此查看 React DOM Server 的文档。

新的严格模式行为

🌐 New Strict Mode Behaviors

未来，我们希望添加一个功能，使 React 能够在保留状态的同时添加和移除 UI 的各个部分。例如，当用户从一个屏幕切换到另一个屏幕再返回时，React 应该能够立即显示之前的屏幕。为此，React 将使用之前相同的组件状态卸载并重新挂载树。

🌐 In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.

此功能将为 React 应用提供开箱即用的更好性能，但要求组件能够应对效果被多次挂载和销毁。大多数效果无需更改即可工作，但有些效果假设它们只会被挂载或销毁一次。

🌐 This feature will give React apps better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.

为了帮助发现这些问题，React 18 在严格模式中引入了一种仅用于开发的新检查。这个新检查会在组件首次挂载时自动卸载并重新挂载每个组件，并在第二次挂载时恢复之前的状态。

🌐 To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

在此更改之前，React 会挂载组件并创建副作用：

🌐 Before this change, React would mount the component and create the effects:

* React mounts the component.
  * Layout effects are created.
  * Effects are created.

在 React 18 的严格模式下，React 会在开发模式中模拟组件的卸载和重新挂载：

🌐 With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

在此查看确保可重用状态的文档。

新钩子

🌐 New Hooks

useId

useId 是一个用于在客户端和服务器端生成唯一 ID 的新 Hook，同时可以避免水合不匹配。它主要对于与需要唯一 ID 的可访问性 API 集成的组件库非常有用。这解决了在 React 17 及以下版本中已经存在的问题，但在 React 18 中尤为重要，因为新的流式服务器渲染器会以无序的方式输出 HTML。查看文档。

注意

useId 不是用来生成列表中的键的。键应从你的数据中生成。

useTransition

useTransition 和 startTransition 允许你将某些状态更新标记为非紧急。其他状态更新默认被视为紧急。React 将允许紧急状态更新（例如，更新文本输入）打断非紧急状态更新（例如，渲染搜索结果列表）。在这里查看文档。

useDeferredValue

useDeferredValue 允许你延迟重新渲染树中非紧急的部分。它类似于防抖，但相比之下有一些优点。它没有固定的时间延迟，因此 React 会在第一次渲染反映到屏幕上后立即尝试延迟渲染。延迟渲染是可中断的，并且不会阻塞用户输入。查看文档。

useSyncExternalStore

useSyncExternalStore 是一个新的 Hook，允许外部存储通过强制将对存储的更新同步化来支持并发读取。它在实现对外部数据源的订阅时消除了使用 useEffect 的需求，并且推荐用于任何与 React 外部状态集成的库。在此查看文档。

注意

useSyncExternalStore 旨在供库使用，而不是应用代码使用。

useInsertionEffect

useInsertionEffect 是一个新的 Hook，它允许 CSS-in-JS 库解决在渲染过程中注入样式的性能问题。除非你已经创建了一个 CSS-in-JS 库，否则我们不期望你会使用它。这个 Hook 会在 DOM 被修改后运行，但在布局效果读取新布局之前执行。这解决了 React 17 及以下版本中已经存在的问题，但在 React 18 中更加重要，因为在并发渲染期间，React 会让出控制权给浏览器，从而给浏览器重新计算布局的机会。在这里查看文档。

注意

useInsertionEffect 旨在供库使用，而不是应用代码使用。

如何升级

🌐 How to Upgrade

请参阅 如何升级到 React 18 获取分步说明以及所有重大和显著更改的完整列表。

🌐 See How to Upgrade to React 18 for step-by-step instructions and a full list of breaking and notable changes.

更新日志

🌐 Changelog

React

• 将 useTransition 和 useDeferredValue 添加到单独的紧急更新和过渡中。(#10426，#10715，#15593，#15272，#15578，#15769，#17058，#18796，#19121，#19703，#19719，#19724，#20672，#20976 由 @acdlite、@lunaruan、@rickhanlonii 和 @sebmarkbage 提交)
• 添加 useId 以生成唯一 ID。(#17322, #18576, #22644, #22672, #21260 由 @acdlite、@lunaruan 和 @sebmarkbage 提交)
• 添加 useSyncExternalStore 以帮助外部存储库与 React 集成。(#15022, #18000, #18771, #22211, #22292, #22239, #22347, #23150 由 @acdlite, @bvaughn, 和 @drarmstr)
• 将 startTransition 添加为 useTransition 的一个版本，无需等待反馈。(#19696 由 @rickhanlonii 提交)
• 为 CSS-in-JS 库添加 useInsertionEffect。（#21913 由 @rickhanlonii 提交）
• 当内容重新出现时，使 Suspense 重新挂载布局效果。(#19322, #19374, #19523, #20625, #21079 由 @acdlite, @bvaughn 和 @lunaruan 提交)
• 让 <StrictMode> 重新运行效果以检查可恢复状态。(#19523，#21418 由 @bvaughn 和 @lunaruan 提交)
• 假设符号始终可用。(#23348 由 @sebmarkbage)
• 移除 object-assign 填充。(#23351 由 @sebmarkbage)
• 移除不受支持的 unstable_changedBits API。 (#20953 由 @acdlite)
• 允许组件渲染未定义。(#21869 由 @rickhanlonii)
• 同步刷新由离散事件（如点击）引起的 useEffect。(#21150 由 @acdlite 提出)
• Suspense fallback={undefined} 现在的行为与 null 相同，不再被忽略。(#21854 由 @rickhanlonii)
• 考虑所有 lazy() 解析为相同的组件等效。(#20357 由 @sebmarkbage)
• 在第一次渲染时不要修改控制台。(#22308 由 @lunaruan)
• 改进内存使用。(#21039 由 @bgirard)
• 如果字符串强制转换抛出错误（Temporal.*、Symbol 等），改进消息 (#22064 由 @justingrant 提出)
• 在可用时优先使用 setImmediate 而不是 MessageChannel。(#20834 由 @gaearon)
• 修复上下文在挂起的树中无法传播的问题。(#23095 由 @gaearon 提交)
• 通过移除急切退出机制修复 useReducer 观察到的不正确属性。(#22445 由 @josephsavona)
• 修复在 Safari 中追加 iframe 时 setState 被忽略的问题。(#23111 由 @gaearon)
• 修复在树中渲染 ZonedDateTime 时的崩溃。(#20617 由 @dimaqq 提交)
• 修复在测试中将文档设置为 null 时的崩溃。(#22695 由 @SimenB 提交)
• 修复在并发功能开启时 onLoad 未触发的问题。(#23316 由 @gnoff 提交)
• 修复当选择器返回 NaN 时的警告。 (#23333 由 @hachibeeDI)
• 修复在测试中当文档设置为 null 时的崩溃。(#22695 由 @SimenB 提交)
• 修复生成的许可证头。(#23004 由 @vitaliemiron 提交)
• 将 package.json 添加为其中一个入口点。(#22954 由 @Jack 提交)
• 允许在 Suspense 边界之外挂起。（#23267 由 @acdlite 提交）
• 每当 hydration 失败时记录可恢复的错误。 (#23319 由 @acdlite)

React DOM

• 添加 createRoot 和 hydrateRoot。(#10239, #11225, #12117, #13732, #15502, #15532, #17035, #17165, #20669, #20748, #20888, #21072, #21417, #21652, #21687, #23207, #23385 由 @acdlite、@bvaughn、@gaearon、@lunaruan、@rickhanlonii、@trueadm 和 @sebmarkbage 提交)
• 添加选择性水化。(#14717, #14884, #16725, #16880, #17004, #22416, #22629, #22448, #22856, #23176 由 @acdlite, @gaearon, @salazarm, 和 @sebmarkbage）
• 将 aria-description 添加到已知 ARIA 属性列表中。(#22142 由 @mahyareb)
• 向视频元素添加 onResize 事件。(#21973 由 @rileyjshaw)
• 将 imageSizes 和 imageSrcSet 添加到已知属性中。(#22550 由 @eps1lon)
• 如果提供了 value，允许非字符串的 <option> 子元素。(#21431 由 @sebmarkbage 提交)
• 修复 aspectRatio 样式未应用的问题。(#21100 由 @gaearon)
• 如果调用 renderSubtreeIntoContainer 则发出警告。(#23355 由 @acdlite)

React DOM 服务器

🌐 React DOM Server

• 添加新的流式渲染器。(#14144, #20970, #21056, #21255, #21200, #21257, #21276, #22443, #22450, #23247, #24025, #24030 由 @sebmarkbage 提交)
• 在处理多个请求时修复 SSR 中的上下文提供者。(#23171 由 @frandiox)
• 在文本不匹配时恢复客户端渲染。(#23354 由 @acdlite)
• 弃用 renderToNodeStream。(#23359 由 @sebmarkbage)
• 修复新服务器渲染器中的虚假错误日志。(#24043 由 @eps1lon 提交)
• 修复新服务器渲染器中的一个漏洞。（#22617 由 @shuding）
• 在服务器上忽略自定义元素内的函数和值符号。(#21157 由 @sebmarkbage 提交)

React DOM 测试工具

🌐 React DOM Test Utils

• 在生产环境中使用 act 时抛出。(#21686 由 @acdlite)
• 支持使用 global.IS_REACT_ACT_ENVIRONMENT 禁用虚假行为警告。(#22561 由 @acdlite)
• 扩展 act 警告以涵盖可能调度 React 工作的所有 API。(#22607 由 @acdlite 提交)
• 进行 act 批量更新。(#21797 由 @acdlite)
• 移除悬挂被动效果的警告。(#22609 由 @acdlite)

React 刷新

🌐 React Refresh

• 在快速刷新中跟踪后安装的根。(#22740 由 @anc95)
• 向 package.json 添加 exports 字段。(#23087 由 @otakustay 提交)

服务器组件（实验性）

🌐 Server Components (Experimental)

• 添加服务器上下文支持。(#23244 由 @salazarm)
• 添加 lazy 支持。(#24068 由 @gnoff 提交)
• 为 webpack 5 更新 webpack 插件 (#22739 由 @michenly 提交)
• 修复 Node 加载器中的一个错误。(#22537 由 @btea)
• 在边缘环境中使用 globalThis 替代 window。(#22777 由 @huozhi 提出)