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

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

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

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 (
    <div>
      <input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}