React 18 正式可用,快来看看新功能有哪些吧

1709

React 18 正式发布。新版本的更新主要包括开箱即用的改进,如自动批处理,新 API(如 startTransition)和支持 Suspense 的流式服务器端渲染。

React 18 中的许多功能都建立在新的并发渲染器之上,这是一个解锁强大新功能的幕后更改。Concurrent React 是可选的,它仅在用户使用并发功能时启用,不过开发团队表示它将会对大众构建应用程序的方式产生重大影响。

React 18 的新功能

新功能:自动批处理

批处理是 React 将多个状态更新分组到一个重新渲染中以获得更好的性能。如果没有自动批处理,我们只能在 React 事件处理程序中批处理更新。默认情况下,Promise、setTimeout、native event handlers或任何其他事件内部的更新不会在 React 中批处理。

使用自动批处理,这些更新将自动批处理:

// 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);

新功能:Transitions

Transitions 过渡是 React 中的一个新概念,用于区分 urgent 和 non-urgent updates。

  • Urgent updates 反映了直接交互,例如键入、单击、按下等。
  • Transition updates将 UI 从一个视图转换到另一个视图。

typing、clicking、pressing等紧急更新需要立即响应,来符合人体对物理对象行为方式的感知。而Transition updates 则不同,用户可能并不希望在屏幕上看到每一次的中间更新。

通常,为了获得最佳用户体验,开发者可以在输入事件中使用 startTransition API 来通知 React 哪些更新是Urgent,哪些是Transition

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);
});

新的Suspense 功能

如果组件树的一部分尚未准备好显示,Suspense 允许以声明方式指定组件树的加载状态:

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

Suspense 使“UI loading state”成为 React 编程模型中 first-class 的声明性概念,开发者可以在基于此构建更高级别的功能。

React 18 中,开发团队在服务器上添加了对 Suspense 的支持,并使用并发渲染特性扩展其功能。

React 18 中的 Suspense 与transition API 结合使用时效果最佳。如果你在 transition 期间 suspend,React 将防止已经可见的内容被替换为 fallback。相反,React 会延迟渲染,直到加载了足够的数据以防止出现错误的加载状态。

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

React DOM Client

新 API 可以从react-dom/client导出:

createRoot:创建要渲染或卸载根的新方法。 使用它来代替 ReactDOM.render。 没有它,React 18 中的新功能就无法工作。

hydraRoot:为服务器渲染的应用程序添加 hydrate 的新方法。用来代替ReactDOM.hydrate,并与新的 React DOM Server API 结合使用 。 没有它,React 18 中的新功能就无法工作。

React DOM Server

新的 API 现在从 react-dom/server 导出,并且完全支持在服务器上流式传输 Suspense:

  • renderToPipeableStream:用于 Node 环境中的流式传输。
  • renderToReadableStream:用于现代边缘运行时环境,例如 Deno 和 Cloudflare worker。

现有的 renderToString 方法仍然有效,但不鼓励使用。

新的Strict Mode Behaviors

Strict Mode Behaviors 将为 React 应用程序提供更好的开箱即用性能,但要求组件能够对多次挂载和销毁的效果具有弹性。大多数效果无需任何更改即可工作,但有些效果假定它们只挂载或销毁一次。

为了解决这些问题,React 18 为Strict Mode Behaviors引入了一个新的仅限开发的检查。每当第一次安装组件时,此新检查将自动卸载并重新挂载每个组件,并在第二次挂载时恢复先前的状态。

在此更改之前,React 会挂载组件并创建效果:

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

使用 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.

新的 Hooks

  • useId
  • useTransition
  • useDeferredValue
  • useSyncExternalStore

React 18:reactjs.org/blog/2022/0…