我如何在React中实现某种全局状态，如此多的页面/类可以使用按钮更新这一个布尔状态

import React from 'react';

// 创建一个Context对象
const GlobalStateContext = React.createContext();

export default GlobalStateContext;

import React from 'react';
import GlobalStateContext from './GlobalStateContext';

// 应用的根组件
class App extends React.Component {
  state = {
    globalState: false, // 初始化全局状态
    toggleGlobalState: () => {
      this.setState(prevState => ({
        globalState: !prevState.globalState,
      }));
    },
  };

  render() {
    return (
      <GlobalStateContext.Provider value={this.state}>
        {/* 其他组件 */}
      </GlobalStateContext.Provider>
    );
  }
}

export default App;

import React from 'react';
import GlobalStateContext from './GlobalStateContext';

// 需要访问全局状态的组件
class MyComponent extends React.Component {
  render() {
    return (
      <GlobalStateContext.Consumer>
        {({ globalState, toggleGlobalState }) => (
          <div>
            {/* 使用全局状态 */}
            <p>全局状态: {globalState.toString()}</p>
            {/* 更新全局状态 */}
            <button onClick={toggleGlobalState}>更新全局状态</button>
          </div>
        )}
      </GlobalStateContext.Consumer>
    );
  }
}

export default MyComponent;