检测 React 中组件树的任何部分何时发生更改

Question

我有两个组件， Parent和Child ：

function Child() {
  const [counter, setCounter] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => setCounter(counter + 1), 1000);
    return () => clearInterval(interval);  
  }, [counter, setCounter]);

  return <div>{counter}</div>;
}

function Parent() {
  return <Child />;
}

Child只是一个简单的计时器，它增加/呈现一个计数器。

从Parent （即我的根组件），我怎么知道组件树的任何部分何时发生了变化？ 例如，当Child更新其 state 并重新渲染时？

将回调传递给Child不是解决方案，因为在一个真实的应用程序中，我会有数百个孩子，并且我需要随时知道组件树的任何部分发生变化。

我尝试在Parent中使用useEffect / componentDidUpdate ，但是当管理自己的 state 的孩子重新渲染时，它不会被调用。 有没有办法实现我想要的？

Answer 1

它看起来像一个 Redux 用例。 您可以在 redux 上轻松实现这一点。

Answer 2

我认为您应该尝试做的是让每个组件能够知道当前渲染周期是否会导致 DOM 更改，基于任何道具或 state 已更改。 然后调用通过Context提供的 function（组件中想要了解更改的提供者，每个子项中的订阅者），让父级知道发生了更改。 您可以在 useEffect 中调用此useEffect以便它在 DOM 更改后发生。