React Hooks中子组件useEffect早于父组件执行的原因是什么？
2026-10-2
useEffect执行顺序原理解答
你观察到的执行顺序是React的正常运行规则，核心原因是两个React的设计逻辑：
1. useEffect的执行遵循「先子后父」的深度优先顺序
React的渲染流程分为两个阶段：
- 渲染阶段：从父组件到子组件依次执行组件函数，计算需要更新的DOM，这个阶段是自上而下的
- 提交阶段：完成真实DOM更新后，执行useEffect回调，这个阶段是自下而上的：必须等所有子组件的副作用执行完成，才能判定父组件完全挂载完成，因此子组件的useEffect永远会比父组件的useEffect先执行。
2. 同一组件内的useEffect按代码声明顺序执行
同一个组件中定义的多个useEffect，会严格按照它们在代码里写的先后顺序执行。
对应你的代码初始挂载时的完整执行流程：
- 执行父组件函数，初始化
fields状态为传入的初始数组，生成包含ChildComponent的JSX - 执行子组件函数，接收
props.fields，生成列表JSX - React完成所有真实DOM的插入操作
- 按自下而上顺序执行所有useEffect：
- 先执行子组件的useEffect，打印
child component - 再执行父组件内的所有useEffect，按声明顺序先跑空依赖的effect，打印
on mount，再跑依赖fields的effect，打印parent component
和你看到的控制台输出完全一致。
- 先执行子组件的useEffect，打印
额外验证（点击修改按钮时的执行顺序）：
点击按钮修改fields后，你会看到输出顺序为child component → parent component，符合上述规则：子组件effect先执行，父组件只有依赖fields的effect会触发，空依赖的effect只会在初始挂载执行一次。
内容的提问来源于stack exchange，提问作者Robert
相关产品推荐
相关产品推荐
