React 怎么用 startTransition 让输入框不卡顿？

Question

仓乃文 · Accepted Answer

输入框实时搜索时，每次输入都触发大量计算渲染会导致输入延迟。startTransition 将计算密集的更新标记为低优先级，让输入框保持流畅响应。搜索场景： ```javascript function Search() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [isPending, startTransition] = useTransition(); const handleChange = (e) => { const value = e.target.value; setQuery(value); // 高优先级：输入框立即响应 startTransition(() => { const filtered = heavyFilter(allData, value); // 低优先级：延后计算 setResults(filtered); }); }; return ( <>

{results.map((r) => )}

); } ``` Tab 切换场景： ```javascript function Tabs() { const [tab, setTab] = useState("home"); const [isPending, startTransition] = useTransition(); const switchTab = (newTab) => { startTransition(() => setTab(newTab)); // 切换不阻塞当前交互 }; return ( <> {isPending && } ); } ``` 补充说明： - startTransition 内的更新是可中断的，有更高优先级更新时会暂停 - isPending 可以显示过渡状态，如降低透明度或显示 spinner - 对比防抖：防抖有固定延迟，startTransition 是自适应的，空闲时立即更新 - 不要在 startTransition 中更新输入框的值，那会让输入也变慢 - 适合搜索过滤、Tab 切换、排序等「结果可以稍等」的场景