React useTransition 如何让大列表搜索不卡顿？

Question

仓乃文 · Accepted Answer

大列表搜索时，每次输入都立即过滤渲染会导致输入框卡顿。useTransition 将昂贵的状态更新标记为「过渡更新」，让输入框的响应优先，过滤结果延后渲染。大列表搜索场景： ```javascript function SearchList({ items }) { const [keyword, setKeyword] = useState(""); const [filtered, setFiltered] = useState(items); const [isPending, startTransition] = useTransition(); const handleChange = (e) => { const value = e.target.value; setKeyword(value); // 高优先级：立即更新输入框 startTransition(() => { setFiltered(items.filter(item => // 低优先级：延后过滤渲染 item.name.includes(value) )); }); }; return ( <> {isPending && }

{item.name}

); } ``` 补充说明： - setKeyword 是紧急更新（同步渲染），startTransition 内的是过渡更新（可中断） - isPending 为 true 时表示过渡更新尚未完成，可显示加载指示器 - React 会优先处理输入框更新，如果有新的输入会中断正在进行的过滤渲染 - 适合搜索过滤、Tab 切换、数据排序等「结果可以稍等」的场景