1 篇博文 含有标签「并发渲染」

如果一个页面有 1 万个列表项，用户在搜索框每敲一个字符，列表就整体重新过滤、重新渲染一次——输入会卡得没法用。useTransition 就是为了解决这类问题：把"不紧急的渲染"和"用户正在操作的渲染"分开，让输入永远先响应，重的活放到后台慢慢干，还可以随时被新输入打断。

本文先讲用法和简单示例（React 19 的写法），再深入 useTransition 的底层机制——lane 优先级模型、startTransition 内部做了什么、渲染为什么能被中断。

1. 一个场景：为什么需要"非紧急"更新​

先看问题。一个受控输入框 + 昂贵过滤：

function SearchList() {
  const [query, setQuery] = useState('');

  const results = useMemo(() => filterProducts(query), [query]); // 1 万条数据的过滤+渲染

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>{results.map((p) => <li key={p.id}>{p.name}</li>)}</ul>
    </div>
  );
}

用户每敲一个字符：onChange → setQuery → 整棵列表重渲染。如果这次渲染要花 200ms，输入框就会滞后 200ms 才回显——因为输入框和列表共用同一个 state、同一次渲染，谁都跑不掉。

问题本质："输入框回显"（紧急）和"过滤并渲染列表"（不紧急）被绑死在一次更新里了。