React中useEffect执行顺序与页面DOM更新的关系？

Question

关于react中useEffect执行顺序，官网文档说useEffect在mouseOver触发的情形下，useEffect会在浏览器绘制最新DOM之后异步执行，但是我试验的情况是在useEffect的alert执行时，最新的DOM还没有在页面上绘制出来，请问这是什么原因？同时还有关于Promise、SetTimeout这类的异步任务，在react的代码执行顺序中是怎么样的呢，希望大佬们可以一并解答下，非常感谢~
代码如下所示：

const Comp: React.FC = () => {
  const [state, setState] = useState(0);

  // App Render Log
  console.log(1);

  // const flag = Date.now();
  // while (Date.now() - flag < 1000) {
  //   // block render 100ms
  // }

  // useLayoutEffect log
  useLayoutEffect(() => {
    console.log('useLayoutEffect');
  }, [state]);

  // useEffect log
  useEffect(() => {
    console.log(2);
    alert('useEffect')
  }, [state]);

  // micro callback log
  Promise.resolve().then(() => console.log(3));

  // macro callback log
  setTimeout(() => {
    console.log(4)
  }, 0);

  return (
    <>
      <div onMouseOver={() => setState(n => n + 1)}>点击更新 State {state}</div>
    </>
  );
};

export default Comp;

浏览器初次绘制打印结果是：
1
useLayoutEffect
3
4
2
此时Promise和setTimeout在useEffect之前执行
useEffect是异步执行，符合官网文档解释

onMouseOver时打印结果是：
1
useLayoutEffect
2
3
4
此时Promise和setTimeout却会在useEffect之后执行？？
此时useEffect执行是同步执行，和官网“非点击事件会导致页面DOM先更新再触发useEffect”也相反？？

对于以上我感到很疑惑，希望能帮忙解答下。

Answer 1