为何基于Promise的sleep函数未导致React应用冻结？

核心原因在于JavaScript的事件循环机制，你的sleep函数是异步非阻塞操作，而for循环是同步阻塞操作，二者的执行逻辑完全不同：

1. 异步sleep的非阻塞逻辑 #

你写的sleep函数基于Promise和setTimeout实现，属于异步任务：

• 组件渲染时，异步IIFE立即执行，遇到await sleep(5000)时，会把setTimeout的回调放进宏任务队列，然后暂停当前异步函数，把主线程交还给浏览器。
• 这时候浏览器可以正常处理UI交互（比如点击按钮触发的状态更新），因为主线程没被占用，React能及时更新DOM。
• 5秒后，setTimeout的回调执行，Promise被resolve，异步函数才继续执行console.log("hey")。

2. 同步for循环的阻塞逻辑 #

如果用同步循环实现“等待”，比如：

function block(milliseconds) {
  const start = Date.now();
  while (Date.now() - start < milliseconds) {}
}
block(5000);

• 这段代码会霸占主线程，持续执行while循环，期间浏览器根本没时间处理UI更新、点击事件等任务——因为事件循环里的所有任务都得等主线程空闲才能执行，所以应用会冻结。

关于组件渲染的补充 #

你预期异步IIFE会“在每次渲染前执行”，但实际上它是在每次组件渲染时立即启动，但不会阻塞渲染：

• 组件的渲染是同步完成的，return语句会立刻生成DOM结构，浏览器很快就能渲染出页面。
• 异步代码里的await不会阻止组件渲染，因为异步任务不会打断主线程的同步任务流程。

总结一下：

• 基于Promise和setTimeout的sleep是非阻塞的，会释放主线程让浏览器处理其他任务；
• 同步循环是阻塞的，会占用主线程导致浏览器无法响应UI操作；
• React的渲染和状态更新都在主线程执行，只要主线程不被阻塞，就能及时更新DOM。

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