目录 (Outline)
- 一、 并发模式的前世今生：从同步到异步调度
- 二、 核心原理：时间分片与 Fiber 架构的再进化
- 三、 实战场景 1：利用 useTransition 优化重型计算
- 四、 实战场景 2：useDeferredValue 实现智能输入建议
- 五、 并发模式下的 Suspense：从 Loading 到数据流的统一
- 六、 总结与展望
一、 并发模式的前世今生：从同步到异步调度
在 React 16 之前，渲染过程是「同步且不可中断」的。这意味着一旦开始渲染，主线程就会被完全占用，直到渲染完成。
1. 历史背景
随着网页交互的复杂化，超大组件树的渲染会导致页面掉帧（卡顿）。用户在输入框打字，如果此时触发了大列表重绘，输入就会明显延迟。
2. 标志性事件
- 2017 年：React 16 引入 Fiber 架构，为并发奠定了基础。
- 2022 年：React 18 正式推出并发模式 API。
- 2024 年：React 19 进一步优化了 Transition 的自动批处理和 Action 集成。
3. 解决的问题 / 带来的变化
并发模式解决了「渲染阻塞」问题。它允许 React 同时准备多个版本的 UI，并根据优先级灵活切换渲染任务。
二、 核心原理：时间分片与 Fiber 架构的再进化
并发模式的核心是可中断的渲染。
1. 时间分片 (Time Slicing)
React 会将大型渲染任务拆分为多个小片（Work Units）。每执行一小片，React 都会「停下来」问一下浏览器：「现在有更高优先级的任务（如点击、按键）吗？」 如果有，就让出主线程。
2. 调度优先级 (Priority Levels)
React 内部定义了不同的优先级：
- Immediate Priority：离散交互（点击、输入）。
- User Blocking Priority：连续交互（滚动、拖拽）。
- Normal Priority：数据获取、非紧急更新。
- Idle Priority：预加载。
3. 代码示例：Fiber 节点的「可中断」特性
// 模拟 React 并发调度（伪代码）
function workLoopConcurrent() {
// 只要还有任务，且当前时间片没用完
while (workInProgress !== null && !shouldYieldToHost()) {
performUnitOfWork(workInProgress);
}
}
三、 实战场景 1：利用 useTransition 优化重型计算
useTransition 是并发模式中最常用的 Hook。它允许你将某些更新标记为「非紧急」。
1. 痛点场景
点击侧边栏切换分类，右侧列表需要重新渲染 5000 个复杂的图表组件。如果直接更新，切换按钮会卡住。
2. 实战代码
import { useState, useTransition } from 'react';
function ChartDashboard() {
const [isPending, startTransition] = useTransition();
const [activeTab, setActiveTab] = useState('summary');
const handleTabChange = (tab) => {
// 立即响应用户的点击动作（高优先级）
setActiveTab(tab);
// 将重型计算放在 Transition 中（低优先级）
startTransition(() => {
// 这里执行会导致大面积重绘的逻辑
updateHugeCharts(tab);
});
};
return (
<div>
<TabButton active={activeTab === 'summary'} onClick={() => handleTabChange('summary')}>
概要
</TabButton>
<TabButton active={activeTab === 'detail'} onClick={() => handleTabChange('detail')}>
详情
</TabButton>
{/* 利用 isPending 展示过渡状态，而不会卡死 UI */}
{isPending ? <Spinner /> : <HeavyCharts tab={activeTab} />}
</div>
);
}
四、 实战场景 2：useDeferredValue 实现智能输入建议
useDeferredValue 允许你延迟更新 UI 的某一部分。
1. 痛点场景
搜索框输入时，每打一个字都要根据输入内容过滤万级数据。如果实时过滤，打字会非常卡顿。
2. 实战代码
import { useState, useDeferredValue } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
// 延迟后的 query 值
const deferredQuery = useDeferredValue(query);
const handleChange = (e) => {
// 搜索框本身立即更新，保证打字流畅
setQuery(e.target.value);
};
return (
<div>
<input value={query} onChange={handleChange} placeholder="快速搜索..." />
{/* 列表根据 deferredQuery 渲染，React 会在空闲时才进行这部分重绘 */}
<BigList query={deferredQuery} />
{/* 提示用户：列表正在后台准备新数据 */}
{query !== deferredQuery && <p>正在匹配结果...</p>}
</div>
);
}
五、 并发模式下的 Suspense：从 Loading 到数据流的统一
在 React 19 中，Suspense 变得更加智能，它能完美配合并发模式处理「流式渲染」。
- 骨架屏自动管理：不需要手动判断
loading状态。 - 选择性注水 (Selective Hydration)：并发模式允许 React 先对用户正在交互的部分进行「水合」，而不是按顺序从头到尾。
六、 总结与展望
并发模式是 React 从「UI 库」向「智能 UI 调度引擎」转变的标志。
- 核心精髓：不再追求最快的渲染，而是追求「最合理的响应」。
- 进阶建议：不要在所有地方使用
useTransition。只有在确实存在性能瓶颈，且更新不直接影响用户输入反馈时，才是它的用武之地。
随着 React 19 对并发模式的进一步磨合，未来的 Web 应用将越来越接近原生 App 的交互流畅度。
