useTransition 和 useDeferredValue 初体验

useTransition 是一个帮助你在不阻塞 UI 的情况下更新状态的 React Hook。

通过 transition，UI 仍将在重新渲染过程中保持响应性。例如用户点击一个选项卡，但改变了主意并点击另一个选项卡，他们可以在不等待第一个重新渲染完成的情况下完成操作。

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');
 
  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ……
}

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

在组件的初始渲染期间，返回的延迟值将与你提供的值相同。但是在组件更新时，React 将会先尝试使用旧值进行重新渲染（因此它将返回旧值），然后再在后台使用新值进行另一个重新渲染（这时它将返回更新后的值）

如果不使用 useDeferredValue ： 每次按键都会立即强制整个列表以不可中断的方式进行重新渲染。

下面的例子中， fallback将不会再被触发。

import { Suspense, useState } from 'react';
import SearchResults from './SearchResults.js';
 
export default function App() {
  const [query, setQuery] = useState('');
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      label>
      <Suspense fallback={<h2>Loading...h2>}>
        <SearchResults query={query} />
      Suspense>
    
  );
}

-------------------------------------------------------------

主要针对的优化场景都是跟下图类似， input快速触发，导致渲染吃力时的应用场景

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

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

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

虽然这些技术在某些情况下是有用的，但 useDeferredValue 更适合优化渲染，因为它与 React 自身深度集成，并且能够适应用户的设备。

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

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

如果你要优化的工作不是在渲染期间发生的，那么防抖和节流仍然非常有用。例如，它们可以让你减少网络请求的次数。你也可以同时使用这些技术。

-------

参考： Quick Start – React