useEffect执行细节

React 确保在渲染完成后执行 useEffect，是通过利用 事件循环 和 微任务队列（Microtask Queue）来实现的。具体来说，React 将 useEffect 的回调放入 浏览器的微任务队列，确保在浏览器完成渲染更新之后（即 DOM 更新完成后），再执行 useEffect 回调。

执行顺序的具体细节：
浏览器渲染： 在 React 进行渲染时，它会首先更新虚拟 DOM，然后计算出与真实 DOM 的差异，并执行相应的 DOM 操作。这个过程会发生在主线程中，并且是同步的。

React 渲染完成： 当 React 完成对虚拟 DOM 的更新并将差异同步到真实 DOM 时，它就会进入 commit phase（提交阶段），此时浏览器已经更新了页面的渲染内容。

微任务队列： 在 React 完成 DOM 更新后，它会将 useEffect 的回调放入微任务队列。微任务队列的执行优先级高于宏任务（如事件监听器），但是低于浏览器的渲染。

事件循环： 一旦浏览器完成了渲染并且主线程空闲，事件循环会从微任务队列中取出所有的任务并执行。在这个阶段，React 会依次执行所有的 useEffect 回调。

确保不会阻塞渲染： 由于 useEffect 是在浏览器渲染完成后执行的，并且被放入微任务队列中执行，它不会阻塞浏览器的渲染过程。React 确保了 useEffect 的执行不会影响到 UI 的渲染和浏览器的绘制操作。

执行顺序：
React 处理虚拟 DOM 变更并更新到真实 DOM。
触发 commit phase（提交阶段），此时浏览器已经渲染更新。
将 useEffect 的回调函数推入微任务队列。
浏览器完成渲染并检查微任务队列，执行 useEffect。
为什么 useEffect 在渲染后执行？
React 会将 useEffect 的回调放入微任务队列，从而使得它在浏览器渲染完成后执行，确保副作用操作不会阻塞渲染和页面展示。
通过这种方式，React 避免了可能的“渲染阻塞”，从而确保了用户可以在最短的时间内看到界面更新，而副作用逻辑（如网络请求、订阅等）则会在渲染后执行。
useEffect 与 useLayoutEffect 的区别
useEffect 是异步执行的，并且会在所有 DOM 更新后、浏览器绘制之前执行，因此可以安全地执行不影响布局的副作用操作。
useLayoutEffect 是同步执行的，在 DOM 更新和浏览器绘制之前就会执行，这意味着它会阻塞页面的渲染，直到副作用执行完毕。通常仅在需要确保 DOM 布局在浏览器绘制之前更新时使用。