为何App组件的useEffect先于子组件Login执行？

核心原因：React渲染流程与路由跳转的异步性 #

当刷新/路径时，整个执行流程按以下顺序推进：

1. App组件优先启动渲染

   • App作为根组件，会率先执行函数体代码，输出Route main
   • 此时user默认值为null，/路由对应的element会渲染<Navigate to="/login" />
   • <Navigate>触发的路由地址变更属于React的状态更新操作，不会中断当前渲染周期，只会在当前渲染完成后触发新一轮渲染

2. useEffect的执行时机规则

   • React中，所有带空依赖数组的useEffect，都会在当前渲染周期的DOM更新完成后执行
   • App组件的渲染先完成，因此它的useEffect会被优先触发，输出App useffect

3. Login组件挂载存在延迟

   • 路由地址变更的状态更新触发后，React才会启动Login组件的渲染：先执行Login函数体输出Login here:，再在本次渲染完成后执行其useEffect输出Login here:' useffect
   • 这个过程发生在App的useEffect执行之后的新一轮渲染周期中，因此Login的useEffect自然晚于App的执行

实际日志顺序验证 #

运行时的日志输出顺序应为：

Route main
App useffect
Login here:
Login here:' useffect

内容的提问来源于stack exchange，提问作者Cihangir Köroğlu