React useDeferredValue 如何延迟渲染耗时组件？

Question

仓乃文 · Accepted Answer

useDeferredValue 返回一个延迟版本的值，当有更紧急的更新时，React 会先处理紧急更新，再用延迟值渲染耗时组件。和 useTransition 类似但适用于无法控制 setState 的场景（如接收父组件的 props）。延迟渲染搜索结果： ```javascript function SearchResults({ query }) { const deferredQuery = useDeferredValue(query); // 延迟版本的 query const isStale = query !== deferredQuery; // 是否正在延迟中 return ( <> {isStale && } {/* 用延迟值渲染耗时组件 */} ); } ``` useDeferredValue vs useTransition： ```javascript // useTransition：你能控制 setState 时用 const [isPending, startTransition] = useTransition(); startTransition(() => setQuery(value)); // useDeferredValue：你无法控制 setState（值来自 props）时用 const deferredQuery = useDeferredValue(query); ``` 补充说明： - useDeferredValue 不需要修改状态更新逻辑，只需在消费端使用 - 延迟值在紧急更新完成后再渲染，不会阻塞用户输入 - 对比防抖（debounce）：防抖有固定延迟，useDeferredValue 是自适应的，空闲时立即更新 - 适合接收 props 渲染耗时组件的场景，如搜索结果、图表、大表格