跳到主要内容

一、React 18 核心新特性​

React 18 的核心是引入了 并发渲染（ Concurrent Rendering ） 能力，并围绕它提供了一系列新特性和 API ，旨在提升应用的性能和用户体验。

1. 核心基石：并发渲染（ Concurrent Rendering ）​

这是 React 18 最根本的变革。它改变了 React 渲染的底层机制，从过去的同步、不可中断模式，升级为可中断、可恢复、可设置的优先级模式。

  • 过去的问题 ：在 React 18 之前，一旦开始渲染，就必须执行到底，这回阻塞浏览器的主线程。如果渲染任务很重（例如渲染一个巨大的列表），用户的点击、输入等交互就会卡顿甚至无响应
  • React 18 的解决方法 ： 并发模式允许 React 将庞大的渲染任务拆分为许多小的人物单元（基于 Fiber 架构），并在浏览器空闲时执行。当有高优先级的交互（如用户输入）发生时， React 可以中断当前的低优先级渲染任务，优先处理用户交互，处理完后再回复之前的渲染。者确保了用户界面始终保持流畅响应

2. 自动批处理（ Automatic Batching ）​

这是一个开箱即用的性能优化。 React 18 会自动将多个状态更新合并到一次重新渲染中，从而减少渲染次数，提升性能。

  • 升级前 ：只有 React 事件处理器（如 onClick ）内的多次 setState 会被批处理。在 setTimeout、Promise 或原生事件回调中，每次 setState 都会触发一次独立的渲染
  • 升级后 ： 所有场景下的多次状态更新都会被自动批处理，无需开发者手动干预

3. 新的根节点 API （ createToot ）​

要启用 React 18 的并发特性，必须使用新的根 API 来创建应用入口。

使用 createRoot 代替旧的 ReactDOM.render
// React 17 及以前
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('app'));

// React 18
import { createRoot } from 'react-dom/client';
const root = create(document.getElementById('root'));
root.render(<App />);

4. 过渡 API （ useTransition/startTransition ）​

这个 API 允许将更新标记为“非紧急”或“过渡”的，从而区分更新的优先级。

  • 作用： 将耗时的更新（如过滤一个庞大的列表）标记为过渡更新。这样，当它于紧急更新（如输入框打字）同时发生时， React 会优先响应用户输入，而将耗时的列表渲染延迟或中断执行，避免页面卡顿
  • useTransition Hook ：返回一个 startTransition 函数和一个 isPending 状态，可用于显示加载指示器
  • startTransition API ：直接用来包裹非紧急的状态更新

5. 延迟值 Hook （ useDeferredValue ）​

与 useTransition 类似，但应用场景不同。它用于延迟一个更新的值，而不是触发更新的动作。

  • 作用 ：当有一个频繁变化的值（如输入框的值），并且这个值被用于一个耗时的计算或渲染时，可以用 useDeferredValue 来获取这个值“延迟版本”。这样， UI 的核心部分（如输入框）能立即响应，而依赖该值的复杂部分（如搜索结果列表）会稍后更新

6. 增强的 Suspense​

<Suspense> 组件的能力得到了扩展，不再仅限于代码分割（ Code Splitting ）。

  • 作用 ：现在它可以用于任何异步操作，例如数据获取。可以用它来声明组件在数据加载完后前应该先是什么加载状态（ fallback ），让异步 UI 的加载体验更加流畅

7. 改进的服务器渲染（ SSR ）​

React 18 对 SSR 进行了重大优化，引入了流式 HTML 渲染。

  • 作用 ：服务器可以边生成 HTML 边发送给客户端，客户端无需等待整个页面生成完毕就开始渲染，从而显著加快首屏加载速度。同时，配合 Suspense 和选择性注水（ Selective Hydration ），可以更快地让用户与页面的关键部分进行交互

8.新的 Hooks​

  • useId 生成在客户端和服务端都保持稳定的唯一 ID ，主要解决 SSR 场景下的 ID 匹配问题，对构建无障碍（ a11y ）应用非常有用
  • useSyncExternalStore ：专门为第三方状态管理库（如 Redux 、 Zustand ）设计，确保在并发模式下，外部数据源能的状态能与 React 的状态保持同步，避免出现视觉上的不一致

二、React 19 核心新特性​

React 19 引入了多项核心新特性，旨在简化开发流程、提升应用性能并改善开发者体验。

1. Actions ：简化的异步交互​

Actions 是一套官方提供的范式，用于处理表单提交、数据变更等异步操作。它自动管理加载（ pending ）、错误（ error ）等状态，大幅减少了模版代码。

  • useActionState Hook ：用于管理表单提交的状态，包括错误信息和加载信息
  • useFormStatus Hook ：允许在表单的子组件中直接读取父表单的提交状态，无需通过 props 传递
  • <form action={...}> ：可以直接将异步函数（ Action ）赋值给表单的 action 属性， React 会自己处理提交工程

2. useOptimistic ：乐观更新​

这个新的 Hook 用于实现乐观 UI 。它允许应用在异步操作前，就立即向用户展示预期的结果，从而提供更流畅的交互体验。

  • 工作原理 ：它会先更新本地状态以反映用户的操作，然后异步请求在后台执行。如果请求成功，状态保持不变；如果失败，则可以回滚到之前的状态

3. use() API ：更灵活的上下文与 Promise 读取​

use() 是一个新的 API ，它既可以读取 Promise ，也可以读取 Context 。

  • 突破 Hooks 规则 ：与传统的 Hooks 不同， use() 可以在条件语句、循环中使用，提供了更大的灵活性
  • 与 Suspense 集成 ：当 use() 读取一个 Promise 时，它会与 Suspense 边界协同工作，在数据加载期间显示回退（ fallback ） UI

4. 语法简化​

  • ref 作为 Prop ：函数组件现在可以直接接收 ref 作为 prop ，不再需要使用 React.forwardRef 进行包裹
  • Context 作为 Provider ：可以直接使用 <Context value={...} /> 来代替 <Context.Provider value={...}>

5. 服务端组件（ RSC ）与文档元数据​

  • 服务器组件（ RSC ） ：在 React 19 中已经稳定，允许组件完全在服务器上运行，减少发送到服务端的 JavaScript 包体积，提升首屏性能
  • 文档元数据 ：现在可以直接在组件中渲染 <title> 、 <meta> 等标签， React 会自动把它们提升到文档的 <head> 部分，简化了页面元数据的管理

6. React Compiler （编译器）​

这是一个旨在通过编译时优化来自动提升 React 应用的性能的编译器。

  • 自动优化 ：它能自动分析组件的依赖关系，并生成更高效的渲染代码，开发者无需手动使用 useMemo 或 useCallback 等优化手段
  • 性能提升 ：在基准测试中，React Compiler 能显著提升首次渲染和更新渲染的性能