React中useEffect执行顺序与页面DOM更新的关系？-灵析社区

关于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 { 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 ( setState(n => n + 1)}>点击更新 State {state} ); }; export default Comp; 浏览器初次绘制打印结果是： 1 useLayoutEffect 3 4 2 此时Promise和setTimeout在useEffect之前执行 useEffect是异步执行，符合官网文档解释 onMouseOver时打印结果是： 1 useLayoutEffect 2 3 4 此时Promise和setTimeout却会在useEffect之后执行？？ 此时useEffect执行是同步执行，和官网“非点击事件会导致页面DOM先更新再触发useEffect”也相反？？ 对于以上我感到很疑惑，希望能帮忙解答下。