useTransition

const [isPending, startTransition] = useTransition()

返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。

danger

useTransition 是 React 18新特性，要注意下版本是否支持。

startTransition 允许你通过标记更新将提供的回调函数作为一个过渡任务：

startTransition(() => {
  setCount(count + 1)
})

isPending 指示过渡任务何时活跃以显示一个等待状态：

function Example() {
  const [isPending, startTransition] = useTransition()
  const [count, setCount] = useState(0)
  
  function handleClick() {
    startTransition(() => {
      setCount(c => c + 1)
    })
  }

  return (
    <div>
      {isPending && 'Loading...'}
      <Button variant="outlined" onClick={handleClick}>{count}</Button>
    </div>
  )
}

注意

过渡任务中触发的更新会让更紧急地更新先进行，比如点击。

过渡任务中的更新将不会展示由于再次挂起而导致降级的内容。这个机制允许用户在 React 渲染更新的时候继续与当前内容进行交互。