前端Wiki/词条/并发特性 Concurrent

并发特性 Concurrent

定义React 18 引入的底层渲染调度机制，让重渲染可中断、可让步、可优先

React 18 之前，一次 reconciliation 一旦开始就必须同步完成，数据量大的更新会长时间占住主线程，输入框敲字、动画都会明显卡顿。并发的核心是 Fiber 架构把渲染拆成可暂停的工作单元：高优先级更新（用户输入）可以打断低优先级更新先渲染，之后低优先级任务再基于最新状态重来。

对开发者最直接的相关 API 是 startTransition 与 useDeferredValue，标记哪些更新可以慢一点；Suspense 在并发模式下才真正成为一等公民，配合 lazy 做到数据到了再渲染。需要注意：并发不是多线程，也不让全部场景变快，它只在存在可降优先级的更新时才有收益。

React.createRoot 启用并发模式，旧版 ReactDOM.render 不生效
startTransition 标记的更新可被打断，适合搜索过滤这类大列表场景
并发不提速所有渲染，优先级区分才有收益

JavaScript

import { startTransition, useState, useDeferredValue, useMemo } from 'react';

function Search() {
  const [text, setText] = useState('');       // 高优先级：输入立即响应
  const [query, setQuery] = useState('');     // 低优先级：可被高优先级打断
  const deferred = useDeferredValue(query);   // 列表再慢半拍也无妨

  const list = useMemo(
    () => bigData.filter((s) => s.includes(deferred)),
    [ deferred ]
  );

  return (
    <>
      <input value={text} onChange={(e) => {
        setText(e.target.value);                        // 输入框立刻更新
        startTransition(() => { setQuery(e.target.value); });  // 列表降级为过渡
      }} />
      <ul>{list.slice(0, 50).map((s) => <li key={s}>{s}</li>)}</ul>
    </>
  );
}

⚠ 常见误区

以为并发让所有操作变快——没有优先级差异就没有收益
在 startTransition 里更新输入控件本身，输入反而变迟钝
继续用 ReactDOM.render 挂载，react 18 特性完全不生效

🔗 相关词条函数式更新与批处理重渲染与 memo