React 18并发模式与useTransition详解

并发模式（Concurrent Mode）

React 18引入了可中断渲染的概念。渲染过程可以被更高优先级的更新打断，让浏览器处理用户输入后再继续渲染。这是一个可选特性（通过createRoot启用），非破坏性变更。

useTransition

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input); // 低优先级更新
});

• 标记setState为低优先级transition
• isPending指示transition是否进行中（可显示加载态）
• 适用于：搜索过滤、列表排序、标签切换等非紧急UI更新
• 高优先级更新（如输入框本身）可以打断低优先级更新

useDeferredValue

const deferredValue = useDeferredValue(value);

• 与useTransition类似，但从值角度而非setState角度
• 当value频繁变化时，deferredValue会延迟更新
• 适用于：接收props时无法控制setState的场景
• 配合memo使用：旧值渲染结果可复用，直到新值准备就绪

区别： | 特性 | useTransition | useDeferredValue | |------|--------------|-----------------| | 控制点 | setState更新 | 值本身 | | 使用场景 | 有控制权的状态更新 | 接收不可控的props | | 代码侵入 | 包装update逻辑 | 包装value |

并发渲染不阻塞交互的原理： React在内存中构建新虚拟DOM树，每5ms让出控制权给浏览器处理事件。用户输入时，React暂停当前渲染任务，先处理高优先级更新。