diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md
index b390ce9419..ef5f870d6c 100644
--- a/src/content/blog/2022/03/29/react-v18.md
+++ b/src/content/blog/2022/03/29/react-v18.md
@@ -2,153 +2,153 @@
title: "React v18.0"
---
-March 29, 2022 by [The React Team](/community/team)
+2022 年 3 月 29 日,由 [React 团队](/community/team) 发布
---
-React 18 is now available on npm! In our last post, we shared step-by-step instructions for [upgrading your app to React 18](/blog/2022/03/08/react-18-upgrade-guide). In this post, we'll give an overview of what's new in React 18, and what it means for the future.
+React 18 现在可以在 npm 上使用啦!在我们的上一篇文章里,我们分享了 [将你的应用更新到 React 18](/blog/2022/03/08/react-18-upgrade-guide) 的每一个步骤。在这片文章里,我们将会概述 React 18 究竟有哪些更新,以及这些更新对于未来的意义。
---
-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.
+我们最新的主要版本更新的内容包括自动批处理等开箱即用能力优化,`startTransition` 等新的 API,还有支持 Suspense 的流式服务端渲染。
-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 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](/blog/2021/06/08/the-plan-for-react-18) to gather feedback from experts in the community and ensure a smooth upgrade experience for the entire React ecosystem.
+我们花了很多年时间来研发 React 的并发渲染,同时我们也还考虑为现有用户提供一种过渡的路径。去年夏天,[我们成立了 React 18 工作组](/blog/2021/06/08/the-plan-for-react-18) 来收集社区专家们的反馈信息,保证整个 React 生态都能有一个丝滑的升级体验。
-In case you missed it, we shared a lot of this vision at React Conf 2021:
+如果你忘了,我们在 React 大会 2021 上公开提出了这个愿景:
-* In [the keynote](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa), we explain how React 18 fits into our mission to make it easy for developers to build great user experiences
-* [Shruti Kapoor](https://twitter.com/shrutikapoor08) [demonstrated how to use the new features in React 18](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2)
-* [Shaundai Person](https://twitter.com/shaundai) gave us an overview of [streaming server rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3)
+* 在 [摘要](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa) 中,我们解释了 React 18 为什么能够实现让开发者创造更好的用户体验这一使命。
+* [Shruti Kapoor](https://twitter.com/shrutikapoor08) [示范了如何使用 React 18 中的新功能](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2)。
+* [Shaundai Person](https://twitter.com/shaundai) 为我们大概介绍了 [支持 Suspense 的流式服务端渲染](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3)。
-Below is a full overview of what to expect in this release, starting with Concurrent Rendering.
+以下是一个在此版本中对需要关注的内容的总结,先从并发渲染开始介绍。
-For React Native users, React 18 will ship in React Native with the New React Native Architecture. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).
+对于 React Native 用户们来说,React 18 将会伴随新的 React Native 体系结构发布。想了解更多信息,可以阅读 [React Conf 摘要](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s)。
-## What is Concurrent React? {/*what-is-concurrent-react*/}
+## 什么是并发 React? {/*what-is-concurrent-react*/}
-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 18 中最重要的更新内容是我们不会要求你过度关注的:并发。我们认为这对于应用开发者而言是一件非常好的事情,尽管这对于库的维护者来说可能有点复杂。
-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.
+并发渲染本身并不是一个功能。它是一个新的底层机制,使得 React 能够同时准备多个版本的 UI。你可以把并发视为一种底层实现的细节——由于它解锁的新功能的缘故,它会非常有价值。React 在底层实现上使用了非常高级的技术,像优先队列和多级缓冲。但是你不会在任何开放的 API 中感知到这些。
-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.
+我们设计 API 的时候,刻意隐藏了实现细节。作为一名 React 开发者,你只需要关注视图是 **什么** 样子,然后由 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 核心渲染模型的基础性更新。因此,知道并发渲染底层工作原理不是很重要,但如果是为了追求更高的技术层次,倒是可能值得去了解它。
-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 18,在加入任何并发功能之前,更新内容渲染的方式和 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 可能开始渲染一个更新,然后中途挂起,稍后又继续。它甚至可能完全放弃一个正在进行的渲染。React 保证即使渲染被中断,UI 也会呈现出一致性。为了实现这一点,它会在整个 DOM 树被计算完毕前一直等待,完毕后执行 DOM 变更。这样做,React 就可以在后台提前准备新的屏幕内容,而不阻塞主线程。这意味着用户输入可以被立即响应,即使存在大量渲染任务,也能有流畅的用户体验。
-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 `` 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 可以从屏幕中移除部分 UI,之后将它们再添加回来,并重用之前的状态。例如,当一个用户标签页切出又切回,React 应该能够立即将之前的屏幕恢复到它先前的状态。在即将到来的次要版本中,我们计划添加一个新的名为 `` 的组件,它实现了这种模式。同样地,你将能够使用 Offscreen 在后台准备新的 UI,在显示前就准备完毕以便快速响应。
-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.
+并发渲染是一个 React 中非常强大的工具,并且我们大多数新功能都是利用了它的优势来创建的,包括 Suspense,transition 和流式服务端渲染。但是在并发渲染这个方向,React 18 也仅仅只是实现我们最终目标的第一步。
-## Gradually Adopting Concurrent Features {/*gradually-adopting-concurrent-features*/}
+## 渐进地采用并发特性 {/*gradually-adopting-concurrent-features*/}
-Technically, concurrent rendering is a breaking change. Because concurrent rendering is interruptible, components behave slightly differently when it is enabled.
+从技术上讲,并发渲染是一个破坏性变更。因为并发渲染是可中断的,当它启用时,组件行为会略微不同。
-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。我们发现,几乎所有现有的组件都能在并发渲染下“正常工作”。然而部分组件可能需要一些额外的迁移工作。这种变化通常很小,你仍然可以按照自己的节奏进行使用。React 18 中的新渲染行为 **只在你的应用中使用新功能的部分启用**。
-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 [``](/reference/react/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 运行而不用破坏现存的代码。然后你可以渐进地按照你的节奏开始添加并发功能。你可以在开发环境中使用 [``](/reference/react/StrictMode) 以利于暴露并发模式相关的问题。严格模式是不影响生产环境的,但是在开发环境中它将会上外额外的警告日志,并且被视为幂等的函数将被调用两次。这没办法捕获所有异常,但是能够有效预防大部分常见的错误类型。
-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.
+在你升级到 React 18 后,你可以立即开始使用并发模式的功能。例如,你可以使用 `startTransition` 在屏幕内容之间进行导航,而不会阻塞用户输入。或者使用 `useDeferredValue` 来节流处理开销巨大的重渲染。
-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 直接交互。例如,在导航到一个新的屏幕时,开发者无需调用 `startTransition`,路由库会自动将导航操作包裹在 `startTransition` 中。
-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.
+这些库升级到兼容并发模式可能需要一些时间。我们已经提供了新的 API,使这些库更容易利用并发功能。同时,在我们努力逐步迁移 React 生态系统的过程中,请对维护者保持耐心。
-For more info, see our previous post: [How to upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide).
+如果想了解更多信息,可以查看我们之前的文章:[如何升级到 React 18](/blog/2022/03/08/react-18-upgrade-guide)。
-## Suspense in Data Frameworks {/*suspense-in-data-frameworks*/}
+## 数据框架中的 Suspense {/*suspense-in-data-frameworks*/}
-In React 18, you can start using [Suspense](/reference/react/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.
+在 React 18 中,你可以在 Relay,Next.js,Hydrogen 或者 Remix 等框架中获取数据。临时使用 [Suspense](/reference/react/Suspense) 获取数据在技术上是可行的,但是不建议作为一般方案。
-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.
+在未来,我们可能会暴露更多原语,使你能用 `Suspense` 更容易地获取数据,那时也就不一定必须要使用某个的框架。不过,Suspense 被深度整合到你的应用结构中时能产生最好的效果:你的路由,你的数据层,你的服务端渲染环境。因此我们预计,即使在未来相当长一段时间里,库和框架也还会在 React 生态中发挥关键作用。
-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).
+就像在过去的 React 的版本中,你总是可以使用 Suspense 与客户端侧的 `React.lazy` 配合进行代码分割。但是我们的对 Suspense 的期望并不仅仅是加载代码——最终的目标是扩展对 Suspense 的支持,以至于相同的声明式 Suspense fallback 能够处理任何异步操作(加载代码,数据,图片等)。
-## Server Components is Still in Development {/*server-components-is-still-in-development*/}
+## 服务器组件仍在开发中 {/*server-components-is-still-in-development*/}
-[**Server Components**](/blog/2020/12/21/data-fetching-with-react-server-components) is an upcoming feature that allows developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. Server Components is not inherently coupled to Concurrent React, but it’s designed to work best with concurrent features like Suspense and streaming server rendering.
+[**服务器组件**](/blog/2020/12/21/data-fetching-with-react-server-components) 是一个即将到来的功能,允许开发者构建跨越服务端和客户端的应用,结合客户端应用丰富的交互性和传统服务端渲染的优良性能,服务器组件和并发模式 React 并不是强耦合的,但是它设计的初衷就是为了配合 Suspense 和流式服务端渲染这样的并发功能。
-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.
+服务器组件仍然是实验性的,但是我们预计会在 18.x 的一个小版本中正式发布。同时,我们正在与 Next.js,Hydrogen 和 Remix 等框架合作,以推进提案,并使其准备好被广泛采用。
-## What's New in React 18 {/*whats-new-in-react-18*/}
+## React 18 的新内容 {/*whats-new-in-react-18*/}
-### New Feature: Automatic Batching {/*new-feature-automatic-batching*/}
+### 新功能:自动批处理 {/*new-feature-automatic-batching*/}
-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:
+批处理是指,当 React 在一个单独的重渲染事件中批量处理多个状态更新以此实现优化性能。如果没有自动批处理的话,我们仅能够在 React 事件处理程序中批量更新。`promise` 内的更新,`setTimeout`,原生应用的事件处理程序以及任何其他事件,默认情况下在 React 中都不会被批量处理;但现在,这些更新内容都会被自动批处理:
```js
-// Before: only React events were batched.
+// 以前: 只有 React 事件会被批处理。
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
- // React will render twice, once for each state update (no batching)
+ // React 会渲染两次,每次更新一个状态(没有批处理)
}, 1000);
-// After: updates inside of timeouts, promises,
-// native event handlers or any other event are batched.
+// 现在: 超时,promise,本机事件处理程序
+// 原生应用时间处理程序或者任何其他时间都被批处理了
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
- // React will only re-render once at the end (that's batching!)
+ // 最终,React 将仅会重新渲染一次(这就是批处理!)
}, 1000);
```
-For more info, see this post for [Automatic batching for fewer renders in React 18](https://github.com/reactwg/react-18/discussions/21).
+想要了解更多信息,可以阅读 [React 18 中能减少渲染次数的自动批处理机制](https://github.com/reactwg/react-18/discussions/21)。
-### New Feature: Transitions {/*new-feature-transitions*/}
+### 新功能:过渡更新 {/*new-feature-transitions*/}
-A transition is a new concept in React to distinguish between urgent and non-urgent updates.
+过渡(transition)更新是 React 中一个新的概念,用于区分紧急和非紧急的更新。
-* **Urgent updates** reflect direct interaction, like typing, clicking, pressing, and so on.
-* **Transition updates** transition the UI from one view to another.
+* **紧急更新** 对应直接的交互,如输入,点击,按压等。
+* **过渡更新** 将 UI 从一个视图过渡到另一个。
-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.
+举个例子,当我们在一个下拉菜单中选择了一个过滤器,你期望的是这个过滤器按钮在你点击的时候立即就能响应。然而,实际结果可能是不连贯的过渡。这样一个较短的延迟是难以察觉的,而且这往往也是能符合预期的。并且如果你在渲染完成之前,再次改变了过滤器,你需要关心的其实只是最新的结果。
-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":
+通常情况下,为了更好的用户体验,一个用户输入应该同时产生一个紧急更新和一个过渡更新。你可以在一个输入事件中使用 `startTransition` API告诉 React 哪些更新是紧急更新,哪些又是过渡更新:
```js
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);
});
```
-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.
+被包裹在 `startTransition` 中的更新会被处理为过渡更新,如果有紧急更新出现,比如点击或者按键,则会中断过渡更新。如果一个过渡更新被用户中断(比如,快速输入多个字符),React 将会抛弃未完成的渲染结果,然后仅渲染最新的内容。
-* `useTransition`: a hook to start transitions, including a value to track the pending state.
-* `startTransition`: a method to start transitions when the hook cannot be used.
+* `useTransition`: 一个用于开启过渡更新的 hook,用于跟踪待定转场状态。
+* `startTransition`: 当 hook 不能使用时,用于开启过渡的方法。
-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](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info).
+并发渲染中将会加入过渡更新,允许更新被中断。如果更新内容被重新挂起,过渡机制也会告诉 React 在后台渲染过渡内容时继续展示当前内容(查看 [Suspense 意见征求](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) 了解更多信息)。
-[See docs for transitions here](/reference/react/useTransition).
+[更多内容请参阅 transition 相关的文档](/reference/react/useTransition)。
-### New Suspense Features {/*new-suspense-features*/}
+### 新的 Suspense 特性 {/*new-suspense-features*/}
-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 允许你声明式地为一部分还没有准备好被展示的组件树指定加载状态:
```js
}>
@@ -156,187 +156,187 @@ Suspense lets you declaratively specify the loading state for a part of the comp
```
-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 使得“UI 加载状态”成为了 React 编程模型中最高级的声明式概念。我们基于此能够构建更高级的功能。
-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.
+几年前,我们推出了一个受限制版的 Suspense。但是唯一支持的场景就是用 `React.lazy` 拆分代码,而且在服务端渲染时完全没有作用。
-In React 18, we've added support for Suspense on the server and expanded its capabilities using concurrent rendering features.
+在 React 18 中,我们已经支持了服务端 Suspense,并且使用并发渲染特性扩展了其功能。
-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 在与 transition API 结合时效果最好。如果你在 transition 期间挂起,React 不会让已显示的内容被之前的内容取代。相反,React 会延迟渲染,直到有足够的数据,以防止出现加载状态错误。
-For more, see the RFC for [Suspense in React 18](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md).
+更多内容参见 [Suspense in React 18](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) 的意见征求。
-### New Client and Server Rendering APIs {/*new-client-and-server-rendering-apis*/}
+### 新的客户端和服务端渲染 APIs {/*new-client-and-server-rendering-apis*/}
-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.
+我们利用这次版本更新的机会,重新设计了我们为在客户端和服务端进行渲染所暴露的 API。这些更改允许用户在升级到 React 18 使用新的 API 时,也能继续使用 React 17 中的旧 API。
#### React DOM Client {/*react-dom-client*/}
-These new APIs are now exported from `react-dom/client`:
+这些新的 API 现在可以从 `react-dom/client` 中导出:
-* `createRoot`: New method to create a root to `render` or `unmount`. Use it instead of `ReactDOM.render`. New features in React 18 don't work without it.
-* `hydrateRoot`: New method to hydrate a server rendered application. Use it instead of `ReactDOM.hydrate` in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.
+* `createRoot`:为 `render` 或者 `unmount` 创建根节点的新方法。请用它替代 `ReactDOM.render`。如果没有它,React 18 中的新功能就无法生效。
+* `hydrateRoot`:hydrate 服务端渲染的应用的新方法。使用它来替代 `ReactDOM.hydrate` 与新的 React DOM 服务端 API 一起使用。如果没有它,React 18 中的新功能就无法生效。
-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`](https://developer.mozilla.org/en-US/docs/Web/API/reportError), or `console.error` in the older browsers.
+`createRoot` 和 `hydrateRoot` 都能接受一个新的可选参数叫做 `onRecoverableError`,它能在 React 在渲染或者 hydrate 过程发生错误后又恢复时,做日志记录对你进行通知。默认情况下,React 会使用 [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError),如果在老旧版本浏览器中,则会使用 `console.error`。
-[See docs for React DOM Client here](/reference/react-dom/client).
-#### React DOM Server {/*react-dom-server*/}
+[参阅 React DOM Client 的文档](/reference/react-dom/client)。
-These new APIs are now exported from `react-dom/server` and have full support for streaming Suspense on the server:
+#### React DOM Server {/*react-dom-server*/}
-* `renderToPipeableStream`: for streaming in Node environments.
-* `renderToReadableStream`: for modern edge runtime environments, such as Deno and Cloudflare workers.
+这些新的 API 现在可以从 `react-dom/server` 中导出,并且在服务端端完全支持流式 Suspense:
-The existing `renderToString` method keeps working but is discouraged.
+* `renderToPipeableStream`:用于 Node 环境中的流式渲染。
+* `renderToReadableStream`:对新式的非主流运行时环境,比如 Deno 和 Cloudflare workers。
-[See docs for React DOM Server here](/reference/react-dom/server).
+现有的 `renderToString` 方法仍然可以使用,但是并不推荐这样做。
-### New Strict Mode Behaviors {/*new-strict-mode-behaviors*/}
+[参阅 React DOM Server 的文档](/reference/react-dom/server)。
+### 新的严格模式行为 {/*new-strict-mode-behaviors*/}
-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 在保留状态的同时添加和移除 UI。例如,当一个用户标签页切出又切回时,React 应该能够立即将之前的页面内容恢复到它先前的状态。为了实现这一点,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 应用带来更好的开箱即用能力,但要求组件能够灵活应对多次安装和销毁的副作用。对于大多数副作用不需要任何改动也依然能够生效,但是部分副作用需要保证它们只进行一次挂载或销毁。
-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 18 为严格模式下的开发环境引入了一个新的检查机制。每当组件第一次挂载时,这个检查机制将自动卸载又重新挂载每个组件,并在第二次挂载时复用先前的状态。
-Before this change, React would mount the component and create the effects:
+在这个变更之前,React 是在挂载组件时产生一些副作用:
```
-* React mounts the component.
- * Layout effects are created.
- * Effects are created.
+* React 装载组件
+ * layout effect 创建
+ * effect 创建
```
-With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:
+在 React 18 的严格模式下,React 在开发模式下将会模拟组件的卸载和挂载:
```
-* 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.
+* React 挂载组件
+ * layout effect 创建
+ * effect 创建
+* React 模拟卸载组件
+ * layout effect 销毁
+ * effect 销毁
+* React 模拟挂载组件,并复用之前的状态
+ * layout effect 创建
+ * effect 创建
```
-[See docs for ensuring reusable state here](/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development).
+[参阅确保状态可复用的文档](/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development)。
-### New Hooks {/*new-hooks*/}
+### 新的 Hook {/*new-hooks*/}
#### useId {/*useid*/}
-`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
+`useId` 是一个新的 hook,用于生成在客户端和服务端两侧都独一无二的 id,避免 hydrate 后两侧内容不匹配。它主要用于需要唯一 id 的,具有集成 API 的组件库。这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题,而且它会在 React 18 中发挥更重要的作用,因为新的流式服务端渲染响应 HTML 的方式将是无序的,需要独一无二的 id 作为索引。[参阅文档](/reference/react/useId)。
+
> Note
>
-> `useId` is **not** for generating [keys in a list](/learn/rendering-lists#where-to-get-your-key). Keys should be generated from your data.
+> `useId` **不是** 为了生成 [列表中的 key](/learn/rendering-lists#where-to-get-your-key)。key 应该根据你的数据生成。
#### useTransition {/*usetransition*/}
-`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/reference/react/useTransition)
+`useTransition` 和 `startTransition` 让你能够将一些状态更新标记为过渡更新。默认情况下,状态更新都被视为紧急更新。React 将允许紧急更新(例如,更新一个文本输入内容)打断过渡更新(例如,渲染一个搜索结果列表)。[参阅文档](/reference/react/useTransition)。
#### useDeferredValue {/*usedeferredvalue*/}
-`useDeferredValue` lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input. [See docs here](/reference/react/useDeferredValue).
+`useDeferredValue` 允许推迟渲染树的非紧急更新。这和防抖操作非常相似,但是有一些改进。它没有固定的延迟时间,React 会在第一次渲染在屏幕上出现后立即尝试延迟渲染。延迟渲染是可中断的,它不会阻塞用户输入。[参阅文档](/reference/react/useDeferredValue)。
#### useSyncExternalStore {/*usesyncexternalstore*/}
-`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
+`useSyncExternalStore` 是一个新的 hook,允许使用第三方状态管理来支持并发模式,并且能通过对 store 进行强制更新实现数据同步。对第三方数据源的订阅能力的实现上,消除了对 `useEffect` 的依赖,推荐任何 React 相关的第三方状态管理库使用这个新特性。[参阅文档](/reference/react/useSyncExternalStore)。
> Note
>
-> `useSyncExternalStore` is intended to be used by libraries, not application code.
+> `useSyncExternalStore` 旨在供库使用,而不是应用程序代码。
#### useInsertionEffect {/*useinsertioneffect*/}
-`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
+`useInsertionEffect` 是一个新的 Hook ,允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经建立了一个 CSS-in-JS 库,否则我们不希望你使用它。这个 hook 将在 DOM 变更发生后,在 layout effect 获取新布局之前运行。这个功能不仅解决了一个在 React 17 及以下版本中已经存在的问题,而且在 React 18 中更加重要,因为 React 在并发渲染时会为浏览器让步,给它一个重新计算布局的机会。[参阅文档](/reference/react/useInsertionEffect)。
> Note
>
-> `useInsertionEffect` is intended to be used by libraries, not application code.
+> `useInsertionEffect` 旨在供库使用,而不是应用程序代码。
-## How to Upgrade {/*how-to-upgrade*/}
+## 如何更新 {/*how-to-upgrade*/}
-See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for step-by-step instructions and a full list of breaking and notable changes.
+请参阅 [如何升级到 React 18](/blog/2022/03/08/react-18-upgrade-guide) 以获取分步说明和完整的中断列表以及值得注意的变化。
-## Changelog {/*changelog*/}
+## 修改日志 {/*changelog*/}
### React {/*react*/}
-* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage))
-* Add `useId` for generating unique IDs. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage))
-* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr))
-* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/facebook/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii))
-* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/facebook/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii))
-* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/facebook/react/pull/19322), [#19374](https://github.com/facebook/react/pull/19374), [#19523](https://github.com/facebook/react/pull/19523), [#20625](https://github.com/facebook/react/pull/20625), [#21079](https://github.com/facebook/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan))
-* Make `` re-run effects to check for restorable state. ([#19523](https://github.com/facebook/react/pull/19523) , [#21418](https://github.com/facebook/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan))
-* Assume Symbols are always available. ([#23348](https://github.com/facebook/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage))
-* Remove `object-assign` polyfill. ([#23351](https://github.com/facebook/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage))
-* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/facebook/react/pull/20953) by [@acdlite](https://github.com/acdlite))
-* Allow components to render undefined. ([#21869](https://github.com/facebook/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii))
-* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/facebook/react/pull/21150) by [@acdlite](https://github.com/acdlite))
-* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/facebook/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii))
-* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/facebook/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage))
-* Don't patch console during first render. ([#22308](https://github.com/facebook/react/pull/22308) by [@lunaruan](https://github.com/lunaruan))
-* Improve memory usage. ([#21039](https://github.com/facebook/react/pull/21039) by [@bgirard](https://github.com/bgirard))
-* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/facebook/react/pull/22064) by [@justingrant](https://github.com/justingrant))
-* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/facebook/react/pull/20834) by [@gaearon](https://github.com/gaearon))
-* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/facebook/react/pull/23095) by [@gaearon](https://github.com/gaearon))
-* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona))
-* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/facebook/react/pull/23111) by [@gaearon](https://github.com/gaearon))
-* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/facebook/react/pull/20617) by [@dimaqq](https://github.com/dimaqq))
-* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB))
-* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/facebook/react/pull/23316) by [@gnoff](https://github.com/gnoff))
-* Fix a warning when a selector returns `NaN`. ([#23333](https://github.com/facebook/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI))
-* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB))
-* Fix the generated license header. ([#23004](https://github.com/facebook/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron))
-* Add `package.json` as one of the entry points. ([#22954](https://github.com/facebook/react/pull/22954) by [@Jack](https://github.com/Jack-Works))
-* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/facebook/react/pull/23267) by [@acdlite](https://github.com/acdlite))
-* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/facebook/react/pull/23319) by [@acdlite](https://github.com/acdlite))
+* 添加 `useTransition` 和 `useDeferredValue` 以将紧急更新和过渡更新分开。([#10426](https://github.com/facebook/react/pull/10426),[#10715](https://github.com/facebook/react/pull/10715),[#15593](https://github.com/facebook/react/pull/15593),[#15272](https://github.com/facebook/react/pull/15272),[#15578](https://github.com/facebook/react/pull/15578),[#15769](https://github.com/facebook/react/pull/15769),[#17058](https://github.com/facebook/react/pull/17058),[#18796](https://github.com/facebook/react/pull/18796),[#19121](https://github.com/facebook/react/pull/19121),[#19703](https://github.com/facebook/react/pull/19703),[#19719](https://github.com/facebook/react/pull/19719),[#19724](https://github.com/facebook/react/pull/19724),[#20672](https://github.com/facebook/react/pull/20672),[#20976](https://github.com/facebook/react/pull/20976) [@acdlite](https://github.com/acdlite),[@lunaruan](https://github.com/lunaruan),[@rickhanlonii](https://github.com/rickhanlonii),and [@sebmarkbage](https://github.com/sebmarkbage))
+* 添加 `useId` 用于生成唯一 ID。([#17322](https://github.com/facebook/react/pull/17322),[#18576](https://github.com/facebook/react/pull/18576),[#22644](https://github.com/facebook/react/pull/22644),[#22672](https://github.com/facebook/react/pull/22672),[#21260](https://github.com/facebook/react/pull/21260) [@acdlite](https://github.com/acdlite),[@lunaruan](https://github.com/lunaruan),and [@sebmarkbage](https://github.com/sebmarkbage))
+* 添加 `useSyncExternalStore` 以帮助外部存储库与 React 集成。([#15022](https://github.com/facebook/react/pull/15022),[#18000](https://github.com/facebook/react/pull/18000),[#18771](https://github.com/facebook/react/pull/18771),[#22211](https://github.com/facebook/react/pull/22211),[#22292](https://github.com/facebook/react/pull/22292),[#22239](https://github.com/facebook/react/pull/22239),[#22347](https://github.com/facebook/react/pull/22347),[#23150](https://github.com/facebook/react/pull/23150) [@acdlite](https://github.com/acdlite),[@bvaughn](https://github.com/bvaughn),and [@drarmstr](https://github.com/drarmstr))
+* 添加 `startTransition` 作为 `useTransition` 的一个版本,不需要等待反馈。 ([#19696](https://github.com/facebook/react/pull/19696) [@rickhanlonii](https://github.com/rickhanlonii))
+* 添加 `useInsertionEffect` 用于 CSS-in-JS 库。([#21913](https://github.com/facebook/react/pull/21913) [@rickhanlonii](https://github.com/rickhanlonii))
+* 当内容重新出现时,使 Suspense 重新装载 layout effect。([#19322](https://github.com/facebook/react/pull/19322),[#19374](https://github.com/facebook/react/pull/19374),[#19523](https://github.com/facebook/react/pull/19523),[#20625](https://github.com/facebook/react/pull/20625),[#21079](https://github.com/facebook/react/pull/21079) [@acdlite](https://github.com/acdlite),[@bvaughn](https://github.com/bvaughn),and [@lunaruan](https://github.com/lunaruan))
+* 使 `` 重新运行 effect 以检查可恢复的状态。([#19523](https://github.com/facebook/react/pull/19523) ,[#21418](https://github.com/facebook/react/pull/21418) [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan))
+* 假设 `Symbols` 总是可用的。([#23348](https://github.com/facebook/react/pull/23348) [@sebmarkbage](https://github.com/sebmarkbage))
+* 移除 `object-assign` polyfill。([#23351](https://github.com/facebook/react/pull/23351) [@sebmarkbage](https://github.com/sebmarkbage))
+* 移除不支持的 `unstable_changedBits` API。([#20953](https://github.com/facebook/react/pull/20953) [@acdlite](https://github.com/acdlite))
+* 允许组件渲染 undefined。([#21869](https://github.com/facebook/react/pull/21869) [@rickhanlonii](https://github.com/rickhanlonii))
+* 从个别事件(如点击),同步送出 useEffect 结果。([#21150](https://github.com/facebook/react/pull/21150) [@acdlite](https://github.com/acdlite))
+* Suspense `fallback={undefined}` 现在与 `null` 的行为相同,不会被忽略。([#21854](https://github.com/facebook/react/pull/21854) [@rickhanlonii](https://github.com/rickhanlonii))
+* 考虑所有 `lazy()` 解析为相同的等效组件。([#20357](https://github.com/facebook/react/pull/20357) [@sebmarkbage](https://github.com/sebmarkbage))
+* 首次渲染时不要 patch 控制台。([#22308](https://github.com/facebook/react/pull/22308) [@lunaruan](https://github.com/lunaruan))
+* 提高内存利用率。([#21039](https://github.com/facebook/react/pull/21039) [@bgirard](https://github.com/bgirard))
+* 如果字符串强制抛出(Temporal.*,Symbol,等),改进提示信息。([#22064](https://github.com/facebook/react/pull/22064) [@justingrant](https://github.com/justingrant))
+*使用 setImmediate 当它在 MessageChannel 上可用时。([#20834](https://github.com/facebook/react/pull/20834) [@gaearon](https://github.com/gaearon))
+* 修复上下文无法在挂起的树内传播。([#23095](https://github.com/facebook/react/pull/23095) [@gaearon](https://github.com/gaearon))
+* 通过移除紧急处理机制,修复 `useReducer` 观察到不正确的参数。([#22445](https://github.com/facebook/react/pull/22445) [@josephsavona](https://github.com/josephsavona))
+* 修复 Safari 在追加 iframe 时忽略 `setState` 的问题。([#23111](https://github.com/facebook/react/pull/23111) [@gaearon](https://github.com/gaearon))
+* 修复在树中渲染 `ZonedDateTime` 时的崩溃。([#20617](https://github.com/facebook/react/pull/20617) [@dimaqq](https://github.com/dimaqq))
+* 修复在测试中文档被设置为 `null` 时的崩溃问题。([#22695](https://github.com/facebook/react/pull/22695) [@SimenB](https://github.com/SimenB))
+* 修复 onLoad 在开启并发特性时不触发的问题。([#23316](https://github.com/facebook/react/pull/23316) [@gnoff](https://github.com/gnoff))
+* 修复选择器返回 `NaN` 时的警告。([#23333](https://github.com/facebook/react/pull/23333) [@hachibeeDI](https://github.com/hachibeeDI))
+* 修复在测试中文档被设置为 `null` 时的崩溃问题。([#22695](https://github.com/facebook/react/pull/22695) [@SimenB](https://github.com/SimenB))
+* 修复生成的 License 头。([#23004](https://github.com/facebook/react/pull/23004) [@vitaliemiron](https://github.com/vitaliemiron))
+* 添加 `package.json` 作为入口点之一。 ([#22954](https://github.com/facebook/react/pull/22954) [@Jack](https://github.com/Jack-Works))
+* 允许在 Suspense 边界外挂起。([#23267](https://github.com/facebook/react/pull/23267) [@acdlite](https://github.com/acdlite))
+* 每当 hydrate 失败时记录一个可恢复的错误。([#23319](https://github.com/facebook/react/pull/23319) [@acdlite](https://github.com/acdlite))
### React DOM {/*react-dom*/}
-* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/facebook/react/pull/10239), [#11225](https://github.com/facebook/react/pull/11225), [#12117](https://github.com/facebook/react/pull/12117), [#13732](https://github.com/facebook/react/pull/13732), [#15502](https://github.com/facebook/react/pull/15502), [#15532](https://github.com/facebook/react/pull/15532), [#17035](https://github.com/facebook/react/pull/17035), [#17165](https://github.com/facebook/react/pull/17165), [#20669](https://github.com/facebook/react/pull/20669), [#20748](https://github.com/facebook/react/pull/20748), [#20888](https://github.com/facebook/react/pull/20888), [#21072](https://github.com/facebook/react/pull/21072), [#21417](https://github.com/facebook/react/pull/21417), [#21652](https://github.com/facebook/react/pull/21652), [#21687](https://github.com/facebook/react/pull/21687), [#23207](https://github.com/facebook/react/pull/23207), [#23385](https://github.com/facebook/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage))
-* Add selective hydration. ([#14717](https://github.com/facebook/react/pull/14717), [#14884](https://github.com/facebook/react/pull/14884), [#16725](https://github.com/facebook/react/pull/16725), [#16880](https://github.com/facebook/react/pull/16880), [#17004](https://github.com/facebook/react/pull/17004), [#22416](https://github.com/facebook/react/pull/22416), [#22629](https://github.com/facebook/react/pull/22629), [#22448](https://github.com/facebook/react/pull/22448), [#22856](https://github.com/facebook/react/pull/22856), [#23176](https://github.com/facebook/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage))
-* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/facebook/react/pull/22142) by [@mahyareb](https://github.com/mahyareb))
-* Add `onResize` event to video elements. ([#21973](https://github.com/facebook/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw))
-* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/facebook/react/pull/22550) by [@eps1lon](https://github.com/eps1lon))
-* Allow non-string `