基于本文回答

播面 播面

刷题像听歌，多听自然懂
0
评论
请从左侧选择一个分类

React 18 中的并发模式 (Concurrent Mode) 是什么？

知识点图片

在 React 18 中，并发模式（Concurrent Mode） 并不是一个你需要「开启」的独立功能，而是 React 内部引入的一套 并发渲染机制，它让 React 能够以更灵活、更高效的方式处理 UI 更新。

1. 背景与概念

在 React 18 之前，React 的渲染是「同步且不可中断」的：一旦开始渲染组件树，就必须完成整个更新才能响应新的事件或状态变化。
这可能导致一些交互延迟，比如在大型列表或复杂组件中，用户点击按钮后界面会「卡住」直到重渲染完成。

并发模式的核心思想：
将渲染工作拆分成多个阶段，允许 React 中断、暂停、恢复或放弃正在进行的渲染任务，以便优先响应用户输入或其他高优先级更新。

2. React 18 的变化

  • React 18 不再有 ReactDOM.unstable_createRoot
    早期实验性的 Concurrent Mode（unstable_createRoot）被废弃。
  • 并发特性成为默认基础能力
    通过 createRoot API（稳定版）启用后，应用自动获得并发渲染的能力，但具体的并发行为需要配合新特性触发。
  • 渐进式采用
    开发者可以选择性使用并发特性（如 startTransition、useDeferredValue），而不必一次性重构整个应用为「完全并发」。

3. 关键技术与 API

startTransition

标记某些状态更新为「低优先级」，让它们可以被高优先级更新（如用户输入）中断。

jsx 
import { startTransition } from 'react';

// 紧急：立即响应输入
setInputValue(input);

// 非紧急：标记为 transition
startTransition(() => {
  setSearchQuery(input);
});

useDeferredValue

延迟更新某个值的派生状态，避免阻塞主线程。

jsx 
const deferredQuery = useDeferredValue(searchQuery);

Suspense + Transitions

结合 <Suspense> ，可以在数据加载时显示回退内容，而不会打断用户交互。

4. 工作原理简述

  1. 可中断渲染
    当 React 执行渲染时，如果遇到更高优先级的任务（如键盘/鼠标事件），它可以暂停当前渲染，先处理紧急任务。
  2. 时间切片（Time Slicing）
    利用浏览器的空闲时间分片执行渲染工作，避免长时间占用主线程。
  3. 双缓冲 Fiber Tree
    在内存中构建新的 Fiber tree（workInProgress），完成后一次性提交到 DOM（current tree），保证一致性视图。

5. Benefits（优势）

  • 更好的用户体验：保持界面响应迅速。
  • 流畅动画：减少因大更新导致的掉帧。
  • 智能调度：根据设备性能动态调整任务执行节奏。

6. Important Note

⚠️ 「Concurrent Mode」这个词在 React 18+文档中已经较少使用，官方更倾向于说“Concurrent Features”（并发特性）。
Concurrent Rendering（并发渲染）是底层能力，startTransition、Suspense等是它的上层表现形式。

总结：
React 18 的并发模式是一套让渲染过程可被中断和重新调度的机制，它通过新 API（如 startTransition）让开发者能显式区分紧急与非紧急更新，从而提升复杂应用的响应性与流畅度。

00:00
00:00