使用 useDeferredValue 优化渲染和输入卡顿

经常写 react 的朋友们都知道，当某些需要大计算量的组件更新时，可能会阻塞其他输入，比如一个典型的 filter select options 场景，每次输入都计算那些项被过滤出来，由于输入的非常快，就会造成卡顿。将用于过滤的值使用 useDeferredValue, 就可以分开这两部分，主动降低筛选的优先级，避免和输入竞争造成的卡顿.

特别是在需要处理大量数据或复杂计算的场景中。它的主要作用是将一个值的更新延迟到主线程空闲时再执行，从而避免因为大量或频繁的状态更新而导致的 UI 卡顿问题。

Copy
import React, { useState, useDeferredValue, useMemo } from 'react';

function SearchComponent({ items }) {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

const filteredItems = useMemo(
() => items.filter(item => item.includes(deferredQuery)),
[items, deferredQuery]
);

return (

<input
type="text"
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="Search..."
/>

{filteredItems.map(item => (
{item}
))}


);
}