React 19 useTransition 列表过滤与并发更新实践

概览`useTransition` 能将高开销更新标记为过渡，从而避免阻塞输入路径。适合搜索过滤与大列表渲染场景，结合挂起提示提升可用性。基础实现'use client' import { useMemo, useState, useTransition } from 'react' export default function FilterList({ items }: { items: string[] }) { const [q, setQ] = useState('') const [pending, startTransition] = useTransition() const [filtered, setFiltered] = useState<string[]>(items) function onInput(v: string) { setQ(v) startTransition(() => { const next = heavyFilter(items, v) setFiltered(next) }) } return ( <div> <input value={q} onChange={(e) => onInput(e.target.value)} aria-controls="list" /> {pending && <p role="status">筛选中…</p>} <ul id="list"> {filtered.map((s) => (<li key={s}>{s}</li>))} </ul> </div> ) } function heavyFilter(arr: string[], q: string) { if (!q) return arr const lq = q.toLowerCase() return arr.filter((s) => s.toLowerCase().includes(lq)) } 治理要点- 将昂贵计算放入过渡，输入状态同步更新保持即时反馈。对超大数据集结合分页与虚拟列表，避免过渡时间过长。使用 `role="status"` 提示挂起状态，兼顾可访问性。验证与指标React：19.0+；Next.js：15.0+输入无明显卡顿；列表更新平滑，挂起提示清晰