React hook useDeferredValue

参考：zh-hans.react.dev/reference/r…

useDeferredValue

useDeferredValue 是一个 React Hook，可以让你延迟更新 UI 的某些部分。

注意事项useDeferredValue  不应该用于需要实时响应的场景。
主要使用场景： 优化你的应用程序性能，特别是在处理大型列表或复杂更新逻辑时。例如：用户在输入框中的输入速度比接收延迟值的图表重新渲染的速度快，那么图表只会在用户停止输入后重新渲染。 用以下示例对比优化前后input输入框输入时的流畅层度：

未优化：

  const [inputValue, setInputValue] = useState('');
  const onChangeHandle =(event: any) => setInputValue(event.target.value);
  return (
    <div>
      <div>
        <input type="text" value={inputValue} onChange={onChangeHandle} />
      </div>
      <div className="flex flex-nowrap items-end g-x-1" id="price">
        {inputValue && <p>inputValue: {inputValue}</p>}
        {inputValue && <p>inputValue: {inputValue}</p>}
        {inputValue && <p>inputValue: {inputValue}</p>}
        {inputValue && <p>inputValue: {inputValue}</p>}
        .....................
        {/* 很多条，数据越多对比越明显 */}
      </div>
    </div>
  );  

使用useDeferredValue优化代码:

  const [inputValue, setInputValue] = useState('');
  const deferredValue = useDeferredValue(inputValue);
  const onChangeHandle = (event: any) => setInputValue(event.target.value);
  return (
    <div>
      <div>
        <input type="text" value={inputValue} onChange={onChangeHandle} />
      </div>
      <div>
        {deferredValue && <p>deferredValue: {deferredValue}</p>}
        {deferredValue && <p>deferredValue: {deferredValue}</p>}
        {deferredValue && <p>deferredValue: {deferredValue}</p>}
        {deferredValue && <p>deferredValue: {deferredValue}</p>}
        .....................
        {/* 很多条，数据越多对比越明显 */}
       </div>
     <div>   
   );  

延迟一个值与防抖和节流之间有什么不同？

在上述的情景中，你可能会使用这两种常见的优化技术：

• 防抖 是指在用户停止输入一段时间（例如一秒钟）之后再更新列表。
• 节流 是指每隔一段时间（例如最多每秒一次）更新列表。
  

与防抖或节流不同，useDeferredValue 不需要选择任何固定延迟时间。如果用户的设备很快（比如性能强劲的笔记本电脑），延迟的重渲染几乎会立即发生并且不会被察觉。如果用户的设备较慢，那么列表会相应地“滞后”于输入，滞后的程度与设备的速度有关。

此外，与防抖或节流不同，useDeferredValue 执行的延迟重新渲染默认是可中断的。这意味着，如果 React 正在重新渲染一个大型列表，但用户进行了另一次键盘输入，React 会放弃该重新渲染，先处理键盘输入，然后再次开始在后台渲染。相比之下，防抖和节流仍会产生不顺畅的体验，因为它们是阻塞的：它们仅仅是将渲染阻塞键盘输入的时刻推迟了。

如果你要优化的工作不是在渲染期间发生的，那么防抖和节流仍然非常有用。例如，它们可以让你减少网络请求的次数。你也可以同时使用这些技术。
总结：
防抖和节流通常用于事件处理和函数执行频率的控制，而 useDeferredValue 更适合优化渲染。