父组件内的React useEffect未因子组件变化重新渲染的问题

React本身不支持通过父组件的无依赖useEffect监听子组件内部的变化，核心原因在于React的组件渲染机制和useEffect的执行逻辑：

1. 无依赖useEffect的执行时机 #

无依赖项的useEffect只会在组件首次挂载完成时执行一次（React 18严格模式下会额外执行一次清理+重新执行，模拟卸载再挂载），以及组件卸载时执行清理函数。它的触发完全和子组件的状态变化无关——子组件内部的更新只会让子组件自身重渲染，不会触发父组件（App）的重渲染，自然也不会触发父组件的useEffect重新执行。

2. 为什么子组件变化不会触发父组件重渲染 #

React的组件渲染是隔离的：只有当组件自身的state、props发生变化，或者父组件触发重渲染时，当前组件才会重渲染。子组件内部的状态属于子组件自身的局部状态，默认不会向上传递影响父组件。

3. 实现需求的两种可行方案 #

如果需要在Home组件内部变化时触发App组件的逻辑，有两种常见思路：

方案一：状态提升 #

把Home组件的局部状态提升到App组件中，通过props传递给Home。这样状态变化会触发App组件重渲染，同时把该状态加入App的useEffect依赖数组，就能在状态变化时执行逻辑：

import { useEffect, useState } from 'react';

function Home({ count, setCount }) {
  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数: {count}
    </button>
  );
}

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Home的状态变化了，执行App的逻辑');
  }, [count]); // 依赖count状态，状态变化时触发

  return <Home count={count} setCount={setCount} />;
}

方案二：子组件回调通知 #

让Home组件通过回调函数的方式，在内部状态变化时通知App组件，App组件通过更新自身的一个“标记状态”来触发重渲染和useEffect执行：

import { useEffect, useState } from 'react';

function Home({ onInnerChange }) {
  const [innerState, setInnerState] = useState(0);

  const handleClick = () => {
    setInnerState(prev => {
      const newState = prev + 1;
      onInnerChange(newState); // 通知App组件
      return newState;
    });
  };

  return <button onClick={handleClick}>内部状态: {innerState}</button>;
}

function App() {
  const [homeChangeFlag, setHomeChangeFlag] = useState(0);

  useEffect(() => {
    if (homeChangeFlag > 0) {
      console.log('Home内部变化了，执行App的逻辑');
    }
  }, [homeChangeFlag]); // 依赖标记状态

  return <Home onInnerChange={() => setHomeChangeFlag(prev => prev + 1)} />;
}

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