监听App中的ReactContext值更改

Question

我试图在叶子组件（内部）试图向根组件（应用程序）发送消息时使用ReactContext API。在以下示例中，使用上下文公开了Val和用于更新Val的函数。这里的问题是，即使单击“单击我”，也不会在App上调用componentDidUpdate（）。

class App extends React.Component {
  static contextType = ThemeContext;

  componentDidUpdate() {
    console.log("update", this.context.val);
  }

  render() {
    return (
      <MyProvider>
        <Inner />
      </MyProvider>
    );
  }
}

class Inner extends React.Component {
  static contextType = ThemeContext;

  render() {
    return <div onClick={() => this.context.load(1234)}>Click me</div>;
  }
}

我仅在上面添加了相关代码。这是此示例的codesandbox。我期望，当单击“单击我”时，App中会调用componentDidUpdate。基本上，我正在寻找一种方法来监听App组件中的上下文更改。