什么是 useTransition 和 useDeferredValue 这样的并发特性？

Question

Accepted Answer

并发 React 可以**中断、暂停并对**渲染工作**排定优先级**。你可以将某些更新标记为**非紧急的 transition**，从而让紧急更新（比如打字输入）即使在有繁重的重新渲染待处理时也能保持响应。

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**它为什么有帮助：** 过滤一个庞大的列表开销很大。如果没有 transition，React 会在重新渲染数千行时阻塞输入，于是打字会感觉卡顿。通过把这个昂贵的更新包裹在 `startTransition` 中，React 会让输入更新保持高优先级，并且当你再按下一个键时可以**丢弃**正在进行中的过滤渲染——不会出现陈旧、卡顿的帧。

## useDeferredValue

当你无法控制 setter 时，这是一个更简单的替代方案——它会给你一个值的「滞后」副本：

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## 何时使用

将它们用于由快速用户输入驱动的**昂贵且非紧急的 UI 更新**：在大型数据集上的边输入边搜索、渲染繁重内容的标签页切换、巨大的过滤/排序表格。对于简单的应用它们是不必要的——只有当某次渲染足够繁重、会导致明显的输入卡顿时，它们才能发挥作用。