React 18 之 useTransition

useTransition

---

先看看 useTransition

想象这样的场景，页面有个 input，用户输入后会去请求 API 获取数据。如果没有额外做一些优化会发生这样的情况，

• 多个搜索调用被执行，造成浪费。
• 如果用户输入的太快太多，页面可能会出现卡死。

为了解决这一问题，在单线程上运行的 React 必须对这些事件和功能进行组合、重新排序和优先处理，以便给用户更友好的体验。

React 18 提供了一个新API：useTransition。"组合"使用这些API，我们将可以从一个全新的维度去优化用户体验——网速快性能高的设备的页面渲染将更快，网速慢性能差的设备的页面体验将更好。

import { useTransition } from'react';

const [isPending, startTransition] = useTransition();

const callback = () => {
  setInputValue(input);

  startTransition(() => {
    setSearchQuery(input);
  });
}

{isPending && <Spinner />

看起来有点像给搜索加了个 debounce。