React18中useEffect阻塞渲染的原因及useLayoutEffect困惑

原本我想演示useEffect与useLayoutEffect的差异，却发现一个奇怪的现象：在React 18中，耗时较长的useEffect会阻塞渲染；而在React 17中，组件会先完成渲染（屏幕完成绘制），之后才触发effect。

示例组件代码如下：

function MyComponent() {
  React.useEffect(() => {
    sleep(1000)
    console.log('effect done!')
  })

  return ...
}

// Sleep工具函数
function sleep(time = 0) {
  const wakeUpTime = Date.now() + time;
  while (Date.now() < wakeUpTime) {}
}

在React 17中，组件会先完成渲染，之后才会在这个耗时的useEffect中“卡住”；但在React 18中，它却会阻塞渲染。这是为什么？effect不是应该在渲染完成后异步触发吗？

如果useEffect运行前屏幕并未完成绘制，那useLayoutEffect的存在意义何在🤔

我制作了两个沙箱展示差异：

• React 17版本（表现符合预期）
• React 18版本（出现渲染阻塞）

内容的提问来源于stack exchange，提问作者Alarid