AI 摘要：本文深入探讨了 React 中 useEffect 的执行顺序问题，通过示例代码和 React 内部机制（如 Fiber 架构和遍历算法）解释了为何子组件的 useEffect 会先于父组件执行。文章分为渲染阶段和提交阶段，详细解析了 React 的生命周期和遍历逻辑，帮助开发者理解并避免潜在的执行顺序问题。

1. 问题引入
• 通过一个父子组件的 useEffect 执行顺序测试题引入主题，展示大多数开发者对执行顺序的误解。
• 示例代码显示子组件的 useEffect 先于父组件执行，但官方文档未明确解释这一行为。
2. React 生命周期概述
• 触发阶段（Trigger）：初始渲染或状态更新（如 setState）。
• 渲染阶段（Render）：调用组件函数，生成虚拟 DOM，标记需更新的节点。
• 提交阶段（Commit）：更新真实 DOM 并执行副作用（如 useEffect）。
3. React Fiber 架构
• Fiber 树是 React 内部用于管理组件层级和更新的数据结构，包含节点类型（如 HostComponent）、子节点、兄弟节点和父节点指针。
• 图示展示了 Fiber 树与 DOM 树的差异，强调其优化渲染效率的特性。
4. Fiber 树的遍历算法
• 深度优先遍历：每个节点被访问两次（向下和向上），优先处理子节点，再处理兄弟节点。
• 动画演示了遍历过程，解释了为何子组件的 useEffect 会先执行。
5. 渲染阶段（Render Phase）
• beginWork()：调用组件函数，执行 console.log，标记需更新的节点。
• completeWork()：生成新的 DOM 节点，但未提交到真实 DOM。
6. 提交阶段（Commit Phase）
• 副作用提交：通过 recursivelyTraversePassiveMountEffect 函数深度优先遍历，先提交子组件的 useEffect，再提交父组件的。
• 动画和代码示例进一步验证了这一行为，解释了同级组件的执行顺序逻辑。

Frontend Masters

React Internals: Which useEffect runs first?

useEffect is one of the most commonly used hooks in the React community. Regardless of how much experience you have with React, you’ve probably used it before.