当前位置：首页 > news >正文

【React】React 18 并发特性

news 2025/6/7 5:45:07

React 18 引入了 并发特性（Concurrent Features），这是一次对 React 渲染机制的重大升级，让 React 更加智能、响应更流畅、资源更节省。

我们来详细讲解一下它的原理、特性、API 以及实际应用。

🧠 一、什么是并发特性（Concurrent Features）？

传统的 React 是 同步阻塞渲染：一旦开始渲染某个更新，就必须做完，不能中断，哪怕是非常耗时的任务，因此可能会发生阻塞。

之前，有时候加载一个复杂的图表，或者切换到一个内容很多的页面，整个页面就突然卡住，这就是 UI 卡顿或者说主线程阻塞。

React 18 引入的“并发特性”允许 React：

中断当前的渲染任务，优先处理更紧急的更新（比如用户输入、动画）。
将更新分片执行，避免阻塞主线程。
自动调度优先级高的任务先执行，提高响应速度。
支持 延迟加载（lazy loading）和流式渲染（Streaming）。

这种机制称为 Concurrent Rendering（并发渲染），实现更智能的调度。

⚠️ 并不是你写的代码是“并发的”，而是 React 的内部调度机制变得更智能了。
⚠️ 并发不是并行，js 还是单线程，并发是任务调度策略。

🚀 二、如何启用并发特性？

从 React 18 开始，默认就支持并发功能，但 必须使用新的 createRoot API 才能激活。

// React 17 旧写法（不会启用并发特性）
ReactDOM.render(<App />, document.getElementById('root'));// React 18 新写法（启用并发特性）
import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'));
root.render(<App />);

🔧 三、React 18 中的关键并发特性 API

1. `startTransition()`

用于把非紧急的更新（如筛选、排序、搜索）标记为 可中断任务。

import { startTransition, useState } from 'react';function App() {const [input, setInput] = useState('');const [list, setList] = useState([]);function handleChange(e) {const value = e.target.value;setInput(value);// 标记为“过渡更新” => 可中断startTransition(() => {const filtered = hugeDataList.filter(item =>item.includes(value));setList(filtered);});}return (<><input value={input} onChange={handleChange} /><ul>{list.map(item => <li key={item}>{item}</li>)}</ul></>);
}

如果用户继续输入，React 会 中断上一个过滤渲染，执行最新的更新。

2. `useTransition()`

useTransition 标记“不那么紧急”的更新。

允许将状态更新标记为“过渡(Transition)”, 降低其优先级。返回isPending
(布尔值，指示过渡是否待处理)和startTransition(函数，用于包裹低优先级状态更新)。

核心：控制状态更新的“时机”或“优先级”，避免阻塞高优先级交互。

更细粒度的过渡控制，可用于显示“加载中”状态：

const [isPending, startTransition] = useTransition();startTransition(() => {// 更新 state
});

{isPending ? '加载中...' : '加载完成'}

在这里插入图片描述

3. `Suspense`（改进支持）

React 18 支持在客户端和服务端都使用 Suspense 进行延迟加载。

import { Suspense, lazy } from 'react';const HeavyComponent = lazy(() => import('./HeavyComponent'));function App() {return (<Suspense fallback={<div>加载中...</div>}><HeavyComponent /></Suspense>);
}

Suspense 是并发渲染支持的重要基础之一。

4. `useDeferredValue()`

用于延迟某个值的变化，防止其触发高开销渲染。

const deferredInput = useDeferredValue(input);

可以搭配 input 实时搜索场景使用，提升体验。

在这里插入图片描述

useTransition 和 useDeferredValue 的区别

控制点不同
- useTransition: 允许你包裹状态更新的逻辑(setState)。你明确指
  定哪个更新是低优先级的
- useDeferredValue：允许你包裹一个值（通常是props或派生状态）。你关注的是值的延迟版本，而非更新过程。
API 和反馈机制
- useTransition返回isPending状态和startTransition函数。isPending可直接用于展示加载 UI。
- useDeferredValue：仅返回一个延迟后的值。如需加载状态，通常需自行比较原始值和延迟值(e.g,text!=deferredText)
发起者视角
- useTransition：主动行为
- useDeferredValue：被动/响应式行为

🧩 四、实际应用场景举例

应用场景	传统做法的问题	React 18 的解决方案
用户输入时，触发大数据渲染	输入卡顿、掉帧	用 `startTransition` 异步更新结果
输入框绑定了复杂运算的数据	实时更新导致卡顿	用 `useDeferredValue` 缓更新
懒加载组件过慢	首屏空白或阻塞渲染	用 `Suspense` 延迟加载并展示 loading
SSR 流式渲染	一次性渲染，TTFB 高	React 18 支持 `streaming`（ReactDOMServer）

搜索/筛选大型列表：

在这里插入图片描述

外部数据源的图表/可视化：

图表接收频繁更新的 data prop，导致重绘耗时，引发卡顿。

在这里插入图片描述

编辑器草稿与实时预览：

用户输入内容（高优先级），旁边的预览窗口根据输入实时渲染 Markdown 或复杂格式（低优先级）。

两者皆有可能，取决于状态组织方式：

useTransition：若编辑器和预览内容是分别的状态，用它包裹更
新预览内容的状态。
useDeferredValue：若预览组件直接接收编辑器内容作 prop , 用
它延迟预览组件的渲染

🎯 总结

特性	说明
`startTransition`	标记某些更新为可中断、可延迟
`useTransition`	用于显示“挂起状态”
`useDeferredValue`	推迟输入值更新，防止重复高开销渲染
`Suspense`	组件级懒加载或延迟展示
`createRoot`	启用并发渲染的前提