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+输入无明显卡顿；列表更新平滑，挂起提示清晰