延后执行效果的确是达到了，但是原理还是没搞清楚

来源：16-10 React.lazy与React.Suspense与错误边界

Panda_io

2023-06-02

请问老师，这里只有一个任务，延后和不延后在我理解也没有啥区别，因为不存在先执行的任务，但是的确没有loading出现，逻辑上有点想不通，就好比马上改变show的值让组件重新渲染和等一会改变show的值组件重新渲染，始终都是show先改变紧接着触发组件渲染，但效果却又这么大差异，令人费解，还请老师不吝赐教！

export default function App() {
  const [show, setShow] = useState(true)
  const handleClick = () => {
    startTransition(() => {
      // 延后执行
      setShow(!show)
    })

  }
  return (
    <div>
      {/* 组件没有加载前就会显示loading */}
      <button onClick={handleClick}>点击</button>
      <Suspense fallback={<div>loading</div>}>
        {show ? <Welcome/> : <Welcome2/>}
      </Suspense>
    </div>
  )
}

写回答

1回答