react18 - 新hooks ——— useDeferredValue

为何要推出useDeferredValue这个hooks，要解决的是react渲染频率过高产生的性能问题。

如果使用 useDeferredValue，我们可以将状态的更新推迟到下一帧或更远的时间。这意味着即使用户在短时间内频繁输入搜索关键字，我们也可以避免频繁的渲染和 DOM 更新，从而提高应用程序的性能。

使用：第一个参数传入的初始值，第二个参数可以传入要延迟的时间等等

import { useDeferredValue } from 'react';
 
function ExampleComponent() {
  const [searchTerm, setSearchTerm] = useDeferredValue('');
  
  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
    // perform search
  };
  
  return (
    <input type="text" value={searchTerm} onChange={handleSearch} />
  );
}

// 
const [state, setState] = useDeferredValue(initialState, {
  timeoutMs: 1000, // 延迟更新时间，单位毫秒
  maximumTimeMs: 5000, // 最长延迟更新时间，单位毫秒
  equalityFn: (a, b) => a.id === b.id, // 状态相等性比较函数
});

useDeferredValue的问题：

例如，在用户更改搜索关键字时，我们可能需要在搜索框下方显示搜索结果。但是，由于使用了 useDeferredValue，搜索结果可能不会立即更新，而是在下一帧或更远的时间更新。这可能会导致搜索结果和搜索关键字不匹配，从而导致数据不一致。

解决方案：useTransition 下一章。