3 月 29 日，React 18 正式公布，此版本包含开箱即用的改良，如主动批处理、新的 API（如 startTransition）和反对 Suspense 的流式服务器端渲染。
据介绍，React 18 中的许多性能都建设在新的并发渲染器之上，这是一个解锁弱小新性能的幕后更改。Concurrent React 是可选的——它只在用户应用并发个性时启用——但开发团队认为 它会对公众构建应用程序的形式产生重大影响。
“咱们花了数年工夫钻研和开发对 React 并发的反对，并且咱们特地留神为现有用户提供逐渐采纳的门路。去年夏天，咱们成立了 React 18 工作组，收集社区专家的反馈，确保整个 React 生态系统的顺利降级体验。”
在 React 18 中，用户能够开始应用 Suspense 在 Relay、Next.js、Hydrogen 或 Remix 等框架中获取数据。应用 Suspense 获取长期数据在技术上是可行的，但官网示意 不倡议将其作为个别策略。
开发团队称，其对 Suspense 的愿景始终不仅仅是加载代码——指标是扩大对 Suspense 的反对，以便最终雷同的申明式 Suspense fallback 能够解决任何异步操作（加载代码、数据、图像等）。
而服务器组件的开发仍处于测试阶段，它容许开发人员构建跨服务器和客户端的应用程序，将客户端应用程序的丰盛交互性与传统服务器渲染的改良性能相结合。此性能预计将在 18.x 主要版本中公布初始版本。
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 反映了间接交互，例如 typing、clicking、pressing 等
- Transition updates 将 UI 从一个视图转换到另一个视图
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 与 transitionAPI 联合应用时成果最佳。如果你在 transition 期间 suspend，React 将避免曾经可见的内容被 fallback 替换。
相同，React 会提早渲染，直到加载了足够的数据以防止出现谬误的加载状态。
新的客户端和服务器渲染 API
在这个版本中，开发团队从新设计了他们为在客户端和服务器上出现而公开的 API。这些更改容许用户在降级到 React 18 中的新 API 时持续应用 React 17 模式下的旧 API。
新的严格模式行为
此性能将为 React 应用程序提供更好的开箱即用性能，但要求组件可能对屡次挂载和销毁的成果具备弹性。大多数成果无需任何更改即可工作，但有些成果假设它们只挂载或销毁一次。为了帮忙解决这些问题，React 18 为严格模式引入了一个新的仅限开发的查看。
每当第一次装置组件时，此新查看将主动卸载并重新安装每个组件，并在第二次装置时复原先前的状态。
博客原文：
https://reactjs.org/blog/2022…