useTransition

startTransition 可以标记一个或者多个状态的 set 方法，将他们标记为 transition，也就是调低他们更新的优先级。

const [isPending, startTransition] = useTransition();

但是这里需要注意的是，被调低的不是 set 方法本身的执行，而是其对应的 UI 更新。

isPending 表示是否还有未完成的 UI 更新任务。我们可以利用这个状态来判断请求是否正在发生

useTransition 可以在组件顶层同时将多个 state 的 set 方法设置为低优先级。这一点是 useDeferredValue 做不到的。

tsx

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');
  const [other, setOther] = useState(false);

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
      setOther(true);
    });
  }

  // ...
}

useDeferredValue 可以在子组件中，设置来自 props 的状态延迟。这个也是 useTransition 不方便做到的

tsx

export default function Ex(props) {
  const deferred = useDeferredValue(props.value);
// ...
}

Contributors

作者:Long Mo

字数统计:218 字

阅读时长:1 分钟

Long Mo

文章作者：Long Mo

useTransition ​

Contributors ​

useTransition

Contributors