檢測 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 更改后發生。