useEffect中的alert为何在浏览器完成绘制前触发？

这个问题其实挺有迷惑性的，咱们一步步捋清楚到底发生了什么～

首先你说的核心认知是对的：React的useEffect回调确实是在浏览器完成DOM更新之后才会执行，但这里的“完成DOM更新”和“完成屏幕绘制”是两个不同的步骤，再加上alert这个API的特殊性质，就导致了你看到的“alert先弹出来”的现象。

具体拆解一下整个流程的时序：

1. 当组件渲染时，React先执行return <div>Alert</div>生成虚拟DOM，接着把对应的真实DOM节点添加到页面的文档树中——这一步只是更新了DOM结构，浏览器还没来得及把这个DOM内容画到屏幕上。
2. React会把useEffect的回调函数放入浏览器的微任务队列，等待当前宏任务（也就是组件初始化、DOM更新这个大任务）执行完毕后再处理。
3. 宏任务执行完后，浏览器会优先清空所有微任务队列，这时候就轮到useEffect的回调执行了，里面的alert("hello")直接触发。
4. 重点来了：alert是一个完全阻塞浏览器线程的同步API，它一弹出，浏览器的所有后续任务（包括还没来得及执行的屏幕绘制操作）都会被暂停。所以你根本看不到页面上的“Alert”文字，就先被alert弹窗挡住了。

如果你想验证这个逻辑，可以把代码改成这样试试：

const Alert = () => {
  useEffect(() => {
    // 用setTimeout把alert放到下一个宏任务队列
    setTimeout(() => {
      alert("hello");
    }, 0);
  }, []);
  return <div>Alert</div>;
};

这时候你会先看到页面上显示“Alert”，然后才弹出alert弹窗。因为setTimeout的回调会被放到宏任务队列，浏览器在处理完微任务后，会先执行屏幕绘制，再处理下一个宏任务队列里的回调。

至于你提到的“第一次加载不出现，刷新才出现”的情况，其实是浏览器在不同加载状态下的任务调度细微差异：刷新时页面的DOM重建流程更紧凑，微任务的执行时机刚好卡在绘制之前；而第一次加载时可能有额外的初始化任务，导致绘制先于微任务完成了，但核心原因还是上面说的那几点。

备注：内容来源于stack exchange，提问作者kob003