javascript - 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