React 19 useDeferredValue 输入流畅性与搜索建议实践

概览`useDeferredValue` 能将昂贵计算或渲染从输入实时路径移出，使输入框保持流畅，建议列表在延后值变化时更新，适合搜索与过滤场景。基础实现'use client' import { useDeferredValue, useEffect, useMemo, useState } from 'react' export default function SearchBox() { const [query, setQuery] = useState('') const deferred = useDeferredValue(query) const suggestions = useMemo(() => heavyCompute(deferred), [deferred]) useEffect(() => { // 可选：根据 deferred 触发网络请求 // fetch(`/api/suggest?q=${encodeURIComponent(deferred)}`) }, [deferred]) return ( <div> <input value={query} onChange={(e) => setQuery(e.target.value)} aria-controls="list" /> <ul id="list"> {suggestions.map((s) => (<li key={s}>{s}</li>))} </ul> </div> ) } function heavyCompute(q: string) { if (!q) return [] return Array.from({ length: 5 }).map((_, i) => `${q}-${i}`) } 治理要点输入路径保持轻量：同步只更新输入状态，昂贵计算基于 deferred 进行。对网络请求与计算使用防抖与缓存，避免频繁刷新。与可访问性协作：`aria-controls` 与 `role` 提示建议列表关系。验证与指标React：19.0+；Next.js：15.0+在复杂建议与过滤场景下输入无卡顿，列表更新稳定