React Hooks中如何强制子组件先于父组件卸载？

首先明确：React 原生的组件卸载流程中，子组件的 useEffect 清理函数会优先于父组件执行。如果你的场景中出现父组件清理先执行的情况，大概率是组件结构或 useEffect 使用方式不符合 React 的生命周期规则。以下是几种可靠的解决思路：

1. 确保组件为标准父子嵌套结构 #

如果你的「父组件」和「子组件」并非通过 React 层级嵌套（比如是兄弟组件、通过全局状态控制显示），React 无法保证卸载顺序。必须让子组件作为父组件的 JSX 直接子元素，这样 React 会自动保证卸载时先处理子组件的清理逻辑。

function Parent() {
  useEffect(() => {
    // 父组件向外部库注册逻辑
    return () => {
      // 此清理函数会在子组件清理后执行
      externalLib.unregisterParent();
      console.log('父组件已注销');
    };
  }, []);

  // 子组件作为父组件的直接子元素
  return <Child />;
}

function Child() {
  useEffect(() => {
    // 子组件向外部库注册逻辑
    externalLib.registerChild();
    return () => {
      // 此清理函数会优先执行
      externalLib.unregisterChild();
      console.log('子组件已注销');
    };
  }, []);

  // 非DOM组件返回null即可
  return null;
}

2. 用状态主动控制子组件卸载时机 #

如果因业务限制无法使用标准嵌套，可以通过父组件的状态先触发子组件卸载，待子组件清理完成后再执行父组件的清理逻辑，完全避免竞态问题。

function Parent() {
  const [isUnmounting, setIsUnmounting] = useState(false);
  const [childUnmounted, setChildUnmounted] = useState(false);

  // 父组件卸载触发时，先标记开始卸载子组件
  useEffect(() => {
    return () => setIsUnmounting(true);
  }, []);

  // 监听子组件卸载状态，完成后执行父组件清理
  useEffect(() => {
    if (isUnmounting && childUnmounted) {
      externalLib.unregisterParent();
      console.log('父组件已注销');
    }
  }, [isUnmounting, childUnmounted]);

  if (!isUnmounting) {
    return <Child onUnmount={() => setChildUnmounted(true)} />;
  }
  // 子组件已卸载，父组件等待清理完成后退出
  return null;
}

function Child({ onUnmount }) {
  useEffect(() => {
    externalLib.registerChild();
    return () => {
      externalLib.unregisterChild();
      console.log('子组件已注销');
      // 通知父组件自身已完成清理
      onUnmount();
    };
  }, [onUnmount]);

  return null;
}

3. 通过Ref跟踪子组件清理函数 #

如果需要父组件主动触发子组件清理，但又不想丢失子组件自身的其他清理逻辑，可以让子组件将清理函数暴露给父组件，父组件在自身清理时优先调用子组件的清理方法。

function Parent() {
  const childCleanupRef = useRef(null);

  useEffect(() => {
    return () => {
      // 优先执行子组件的清理函数
      if (childCleanupRef.current) {
        childCleanupRef.current();
      }
      // 再执行父组件自身的清理
      externalLib.unregisterParent();
      console.log('父组件已注销');
    };
  }, []);

  return <Child setCleanupFn={fn => childCleanupRef.current = fn} />;
}

function Child({ setCleanupFn }) {
  useEffect(() => {
    const cleanup = () => {
      externalLib.unregisterChild();
      console.log('子组件已注销');
      // 子组件的其他清理逻辑（比如释放本地资源）
    };
    // 将清理函数暴露给父组件
    setCleanupFn(cleanup);

    return cleanup;
  }, [setCleanupFn]);

  return null;
}

为什么不推荐临时方案？ #

• 父组件直接注销子组件：会跳过子组件自身的 useEffect 清理逻辑，导致子组件持有的其他资源（如定时器、本地状态）无法正常释放。
• setTimeout 延迟清理：无法精准控制延迟时间，且父组件快速重挂载时，旧的清理函数可能仍在等待执行，与新的注册逻辑产生竞态冲突，引发难以排查的 bug。

内容的提问来源于stack exchange，提问作者Steve Bennett