认识

2023年12月20日

柏拉文

越努力，越幸运

一、认识

useTransition 是一个帮助你在不阻塞 UI 的情况下更新状态的 React Hook。useTransition 的作用为: 执行过渡效果时 (假设 UI 从 a 过度到b), 通常处理逻辑包括 3 个状态:

初始情况是 UI a
开启过渡后, 显示过渡中 loading 效果
过渡完成后切换到 UI b

传统过渡中效果的弊端:

时间比较短, 过渡中效果可能比较生硬
加载过程阻塞 UI, 也会带来不好的 UX

useTransition 作用是切换 UI 时, 先显示旧的 UI, 待新的 UI 加载完成后再显示新的 UI

二、语法

import { useTransition } from 'react';

function TabContainer() {
  const [value, setValue] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = ()=>{
    startTransition(()=>{
      setValue(1);
    });
  }

  return <div>
    { isPending && <span>isTransition</span>}

    <button onClick={handleClick}></button>

    <div>{ value }</div>
  </div>
}

isPending: 告诉你是否存在待处理的 transition。
startTransition: 可以使用此方法将状态更新标记为 transition

一、认识​

二、语法​

一、认识

二、语法