React父子组件useEffect执行顺序：为何子先执行？如何让父先执行？

一、为什么子组件useEffect先于父组件执行？ #

React组件挂载遵循从父到子的渲染顺序，但useEffect是在组件**完成挂载（DOM更新完成）**后才触发的钩子，具体流程如下：

1. 执行父组件的函数体（仅处理渲染逻辑，不触发useEffect）
2. 渲染父组件JSX，遇到子组件后，执行子组件的函数体
3. 子组件完成渲染并挂载到DOM，触发子组件的useEffect
4. 父组件完成整个DOM树的挂载，最后触发父组件的useEffect

这就导致了子组件的useEffect会先于父组件执行，对应你提供的代码，控制台输出顺序为：

Child useEffect
Parent useEffect

二、如何让父组件useEffect先执行？ #

可以通过状态传递+依赖监听的方式，让子组件的useEffect等待父组件的useEffect执行完成后再触发，具体实现如下：

修改后的完整代码： #

import React, { useState, useEffect } from "react";

function Parent() {
  const [parentMounted, setParentMounted] = useState(false);

  useEffect(() => {
    console.log("Parent useEffect");
    // 父组件副作用执行完成后，标记父组件已挂载
    setParentMounted(true);
  }, []);

  return (
    <div>
      <h1>Parent Component</h1>
      <Child parentMounted={parentMounted} />
    </div>
  );
}

function Child({ parentMounted }) {
  useEffect(() => {
    // 仅在父组件已挂载的情况下执行子组件副作用
    if (parentMounted) {
      console.log("Child useEffect");
    }
  }, [parentMounted]); // 依赖父组件的挂载状态

  return (
    <div>
      <h2>Child Component</h2>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

原理说明： #

1. 父组件初始化时parentMounted为false，子组件的useEffect因依赖值为false，不会执行副作用逻辑
2. 父组件完成挂载后，触发自身useEffect，打印日志并将parentMounted设为true
3. 子组件监听parentMounted变化，当值变为true时，触发自身useEffect并执行副作用

此时控制台输出顺序为：

Parent useEffect
Child useEffect

内容的提问来源于stack exchange，提问作者Ravinder Singh