React 18 is now available on npm!
反应18现在可以在 npm 上使用！
In our last post, we shared step-by-step instructions for upgrading your app to React 18. In this post, we’ll give an overview of what’s new in React 18, and what it means for the future.
在我们上一篇文章中，我们分享了将你的应用升级到 React 18的步骤说明。在这篇文章中，我们将概述什么是新的反应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.
我们最新的主要版本包括开箱即用的改进，如自动批处理，新的 api，如 startTransition，以及支持悬念的流服务器端渲染。
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中的许多特性是在我们新的并发呈现程序之上构建的，这是一个幕后的更改，解锁了强大的新功能。Concurrent 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.
我们花了多年时间研究和开发 React 中对并发性的支持，并且我们特别注意为现有用户提供一个渐进的采用路径。去年夏天，我们成立了 React 18工作组，以收集社区专家的反馈，确保整个 React 生态系统的顺利升级体验。
In case you missed it, we shared a lot of this vision at React Conf 2021:
如果你没有注意到，我们在 React Conf 2021上分享了很多这样的愿景:
- In 在the keynote 主题演讲, we explain how React 18 fits into our mission to make it easy for developers to build great user experiences 我们将解释 React 18如何符合我们的使命，让开发人员能够轻松地建立出色的用户体验
- Shruti Kapoor demonstrated how to use the new features in React 18 演示了如何使用 React 18中的新特性
- Shaundai Person 陕北人 gave us an overview of 给了我们一个概述streaming server rendering with Suspense 媒体伺服器的悬念渲染
Below is a full overview of what to expect in this release, starting with Concurrent Rendering.
下面是对这个版本中所期望的内容的全面概述，从并发呈现开始。
Note 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.
注意: React Native 用户: React 18将发布在 React Native with the New React Native Architecture。更多信息，请参见 React Conf 主旨。
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.
第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.
然而，Concurrent 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.
Concurrent 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.
在并发渲染中，情况并非总是如此。反应可能开始呈现一个更新，暂停在中间，然后继续以后。它甚至可能完全放弃正在进行的渲染。作出反应可以保证，即使渲染被中断，UI 也会显示出一致性。为了做到这一点，它等待执行 DOM 变换，直到最后，即评估完整个树之后。有了这个功能，React 可以在后台准备新的屏幕，而不会阻塞主线程。这意味着 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
另一个例子是可重用状态。Concurrent React 可以从屏幕上删除 UI 的部分，然后在重用之前的状态时将它们添加回来。例如，当用户选项卡远离屏幕并返回时，React 应该能够将前一个屏幕恢复到与之前相同的状态。在即将到来的次要版本中，我们计划添加一个名为 < offscreen > 的新组件来实现这个模式。类似地，你可以使用 Offscreen 在后台准备新的用户界面，这样在用户显示之前就可以了。
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 中一个强大的新工具，我们的大多数新功能都是为了利用它而建立的，包括悬念、转场和媒体伺服器渲染。但是18号反应仅仅是我们在这个新基础上的目标的开始。
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
总体升级策略是在不破坏现有代码的情况下，在 React 18上运行应用程序。然后你就可以开始按照自己的节奏逐步添加并发特性。您可以在开发过程中使用 < strictmode > 来帮助解决表面上与并发相关的错误。Strict Mode 不影响生产行为，但是在开发过程中，它将记录额外的警告和双重调用函数，这些函数应该是幂等的。它不会捕捉到所有的信息，但是它可以有效地防止最常见的错误。
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 在屏幕之间导航，而不会阻塞用户输入。或者使用 deferredvalue 来抑制昂贵的重新呈现。
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，使得库更容易利用并发特性。与此同时，在我们逐步迁移反应生态系统的过程中，请对维护者保持耐心。
For more info, see our previous post: How to upgrade to React 18.
更多信息，请看我们之前的帖子: 如何升级到 React 18。
Suspense in Data Frameworks 数据框架中的悬念
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.
在第18个反应中，您可以开始在诸如 Relay、 Next.js、 Hydrogen 或 Remix 等固执的框架中使用暂停来获取数据。使用暂记获取特定数据在技术上是可行的，但是仍然不推荐作为一般策略。
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 生态系统中发挥关键作用。
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 一样，您也可以使用 suspects 在客户机上使用 React.lazy 进行代码分割。但是，我们对于悬念的愿景一直远不止是加载代码ーー我们的目标是扩展对悬念的支持，以便最终，同样的声明性悬念回退可以处理任何异步操作(加载代码、数据、图像等)。
Server Components is Still in Development 服务器组件仍在开发中
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.
服务器组件是一个即将到来的功能，它允许开发人员构建跨服务器和客户端的应用程序，将客户端应用程序的丰富交互性与传统服务器渲染的改进性能结合起来。服务器组件本质上并不与并发反应耦合，但是它被设计成能够最好地工作于并发特性，比如悬念和媒体伺服器渲染。
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 反应18的新发现
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 事件处理程序中批处理更新。在 React 默认情况下，promises、 setTimeout、本机事件处理程序或任何其他事件中的更新都不会批处理。通过自动批处理，这些更新将自动批处理:
// 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);
For more info, see this post for Automatic batching for fewer renders in React 18.
更多信息，请看这篇文章自动批处理较少的渲染在反应18。
New Feature: Transitions 新特性: 过渡
A transition is a new concept in React to distinguish between urgent and non-urgent updates.
转换是 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 哪些更新是紧急的，哪些是“转换”:
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. 当钩子不能被使用时，一个开始转换的方法
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).
转换将选择并发呈现，这允许更新被中断。如果内容重新挂起，转场也会告诉 React 继续显示当前内容，同时在背景中呈现转场内容(更多信息请参见暂停 RFC)。
See docs for transitions here.
点击这里查看转换文档。
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 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.
悬念使“ 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.
几年前我们推出了一个有限版本的悬念。但是，唯一受支持的用例是与 React.lazy 进行代码分割，而且在服务器上呈现时根本不支持这个用例。
In React 18, we’ve added support for Suspense on the server and expanded its capabilities using concurrent rendering features.
在第18次反应中，我们在服务器上增加了对悬念的支持，并且使用并发渲染特性扩展了它的功能。
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.
悬念在反应18工程最好的时候结合了过渡 API。如果在转换期间挂起，React 将防止已经可见的内容被回退替换。相反，React 将延迟渲染，直到加载了足够的数据以防止出现错误的加载状态。
For more, see the RFC for Suspense in React 18.
欲了解更多，请参见反应18悬念的 RFC。
New Client and Server Rendering APIs 新的客户端和服务器渲染 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.
在这个版本中，我们利用机会重新设计了为在客户机和服务器上呈现而公开的 api。这些改变允许用户在 React 17模式下继续使用旧的 api，同时在 React 18中升级到新的 api。
React DOM Client 反应 DOM 客户端
These new APIs are now exported from react-dom/client:
这些新的 api 现在从 react-dom/client 导出:
-
createRoot: New method to create a root to : 创建 root to 的新方法renderor 或unmount. Use it instead of 。使用它而不是ReactDOM.render. New features in React 18 don’t work without it. . React 18中的新特性没有它就不能工作 -
hydrateRoot: New method to hydrate a server rendered application. Use it instead of : 新方法水化服务器呈现的应用程序。使用它而不是ReactDOM.hydratein conjunction with the new React DOM Server APIs. New features in React 18 don’t work without it. 与新的 React DOM Server 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, or console.error in the older browsers.
和 hydrateRoot 都接受一个新的选项，叫做 onRecoverableError，以防你想在 React recovered from errors during rendering 或 hydration for logging 时得到通知。默认情况下，reportError 或 console.error 将在旧的浏览器中使用。
See docs for React DOM Client here.
点击这里查看 React DOM Client 的文档。
React DOM Server 反应 DOM 服务器
These new APIs are now exported from react-dom/server and have full support for streaming Suspense on the server:
这些新的 api 现在从 react-dom/server 导出，并在服务器上完全支持流悬念:
-
renderToPipeableStream: for streaming in Node environments. : 用于 Node 环境中的流媒体 -
renderToReadableStream: for modern edge runtime environments, such as Deno and Cloudflare workers. : 用于现代边缘运行时环境，如 Deno 和 Cloudflare workers
The existing renderToString method keeps working but is discouraged.
现有的 renderToString 方法继续工作，但不提倡使用。
See docs for React DOM Server here.
点击这里查看 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.
为了帮助表面这些问题，第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.
With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:
使用反应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.
See docs for ensuring resusable state here.
请参阅文档以确保可重复使用状态。
New Hooks 新钩子
useId 有用的 id
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.
useId 是一个新的钩子，用于在客户机和服务器上生成唯一的 id，同时避免水合不匹配。它主要用于组件库与需要唯一 id 的可访问性 api 集成。这解决了一个在 React 17及以下版本中已经存在的问题，但是在 React 18中这个问题更加重要，因为新的媒体伺服器渲染器是如何无序地传递 HTML 的。请看这里的文件。
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
Usevance 和 startTransition 允许您将某些状态更新标记为非紧急状态。默认情况下，其他状态更新被认为是紧急的。响应将允许紧急状态更新(例如，更新文本输入)中断非紧急状态更新(例如，呈现搜索结果列表)。请看这里的文件
useDeferredValue 使用 deferredvalue
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.
useDeferredValue 允许您推迟重新呈现树的非紧急部分。它类似于债务减记，但与债务减记相比有一些优点。没有固定的时间延迟，所以在第一次渲染反映在屏幕上之后，React 会尝试延迟渲染。延迟渲染是可中断的，不会阻塞用户输入。请看这里的文件。
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.
useSyncExternalStore 是一个新的挂钩，它允许外部存储通过强制存储的更新为同步更新来支持并发读取。在实现对外部数据源的订阅时，它消除了对 useEffect 的需要，并且建议任何与状态外部集成到 React 的库使用它。请看这里的文件。
Note
注意
useSyncExternalStoreis intended to be used by libraries, not application code.useSyncExternalStore 用于库，而不是应用程序代码。
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.
useInsertionEffect 是一个新的钩子，它允许 CSS-in-JS 库解决渲染中注入样式的性能问题。除非您已经构建了一个 CSS-in-JS 库，否则我们不希望您使用它。这个钩子将在 DOM 变异后运行，但是在布局效果之前读取新的布局。这解决了一个在 React 17及以下版本中已经存在的问题，但在 React 18中更为重要，因为 React 在并发呈现过程中向浏览器屈服，给了浏览器重新计算布局的机会。请看这里的文件。
Note
注意
useInsertionEffectis intended to be used by libraries, not application code.Usedinsertioneffect 适用于库，而不是应用程序代码。