React：如何从类组件中读取并更新全局变量？

你遇到的报错是因为StatePool.useState属于React Hook，而Hook只能在函数组件或自定义Hook的顶层调用，类组件的构造函数或方法里调用Hook会违反Hook规则，所以抛出了那个错误。下面给你两种适合类组件的全局状态管理方案：

方案一：React Context + 高阶组件(HOC) #

这种方案轻量，不需要额外依赖，适合中小型项目的状态共享需求。

1. 创建全局状态Context和Provider #

import React, { createContext, Component, ReactNode } from 'react';

// 定义全局状态类型
interface GlobalState {
  count: number;
  isOpen: boolean;
}

// 定义状态更新方法的类型
interface GlobalActions {
  incrementCount: () => void;
  toggleIsOpen: () => void;
  updateState: (newState: Partial<GlobalState>) => void;
}

// 创建Context，初始值设为undefined，后续由Provider提供实际值
const GlobalStateContext = createContext<{
  state: GlobalState;
  actions: GlobalActions;
} | undefined>(undefined);

// 编写Provider组件，负责管理全局状态和更新逻辑
class GlobalStateProvider extends Component<{ children: ReactNode }, GlobalState> {
  constructor(props: { children: ReactNode }) {
    super(props);
    this.state = {
      count: 0,
      isOpen: false,
    };
  }

  incrementCount = () => {
    this.setState(prev => ({ count: prev.count + 1 }));
  };

  toggleIsOpen = () => {
    this.setState(prev => ({ isOpen: !prev.isOpen }));
  };

  updateState = (newState: Partial<GlobalState>) => {
    this.setState(newState);
  };

  render() {
    return (
      <GlobalStateContext.Provider
        value={{
          state: this.state,
          actions: {
            incrementCount: this.incrementCount,
            toggleIsOpen: this.toggleIsOpen,
            updateState: this.updateState,
          },
        }}
      >
        {this.props.children}
      </GlobalStateContext.Provider>
    );
  }
}

2. 编写高阶组件(HOC)注入状态 #

// 高阶组件：将全局状态和操作方法注入到类组件的props中
function withGlobalState<T extends {}>(Component: React.ComponentType<T>) {
  return class extends Component<T & {
    globalState: GlobalState;
    globalActions: GlobalActions;
  }> {
    static contextType = GlobalStateContext;
    context!: React.ContextType<typeof GlobalStateContext>;

    render() {
      if (!this.context) {
        throw new Error('withGlobalState必须在GlobalStateProvider内部使用');
      }
      return (
        <Component
          {...this.props}
          globalState={this.context.state}
          globalActions={this.context.actions}
        />
      );
    }
  };
}

3. 在类组件中使用 #

// 示例类组件
interface Class1Props {
  // 组件自身的props定义
}

class Class1 extends Component<Class1Props & {
  globalState: GlobalState;
  globalActions: GlobalActions;
}> {
  render() {
    const { globalState, globalActions } = this.props;
    return (
      <div>
        <p>计数：{globalState.count}</p>
        <button onClick={globalActions.incrementCount}>+1</button>
        <p>弹窗状态：{globalState.isOpen ? '已打开' : '已关闭'}</p>
        <button onClick={globalActions.toggleIsOpen}>切换弹窗</button>
        <button onClick={() => globalActions.updateState({ count: 10 })}>设置计数为10</button>
      </div>
    );
  }
}

// 用HOC包装组件，注入全局状态
const Class1WithGlobalState = withGlobalState(Class1);

4. 根组件中挂载Provider #

function App() {
  return (
    <GlobalStateProvider>
      <Class1WithGlobalState />
      <Class2WithGlobalState />
      <Class3WithGlobalState />
    </GlobalStateProvider>
  );
}

方案二：Redux（适合复杂状态场景） #

如果你的项目状态逻辑复杂、需要频繁跨组件共享状态，Redux是更稳定的选择，它天然支持类组件。

1. 创建Reducer和Store #

import { createStore } from 'redux';

// 定义全局状态类型
interface GlobalState {
  count: number;
  isOpen: boolean;
}

// 定义动作类型
type Action = 
  | { type: 'INCREMENT_COUNT' }
  | { type: 'TOGGLE_IS_OPEN' }
  | { type: 'UPDATE_STATE', payload: Partial<GlobalState> };

// 初始状态
const initialState: GlobalState = { count: 0, isOpen: false };

// Reducer函数：处理状态更新逻辑
function globalReducer(state = initialState, action: Action): GlobalState {
  switch (action.type) {
    case 'INCREMENT_COUNT':
      return { ...state, count: state.count + 1 };
    case 'TOGGLE_IS_OPEN':
      return { ...state, isOpen: !state.isOpen };
    case 'UPDATE_STATE':
      return { ...state, ...action.payload };
    default:
      return state;
  }
}

// 创建Store
const store = createStore(globalReducer);

2. 根组件挂载Redux Provider #

import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <Class1 />
      <Class2 />
      <Class3 />
    </Provider>
  );
}

3. 连接类组件到Redux #

import { connect } from 'react-redux';

class Class1 extends Component<{
  count: number;
  isOpen: boolean;
  incrementCount: () => void;
  toggleIsOpen: () => void;
  updateState: (payload: Partial<GlobalState>) => void;
}> {
  render() {
    const { count, isOpen, incrementCount, toggleIsOpen, updateState } = this.props;
    return (
      <div>
        <p>计数：{count}</p>
        <button onClick={incrementCount}>+1</button>
        <p>弹窗状态：{isOpen ? '已打开' : '已关闭'}</p>
        <button onClick={toggleIsOpen}>切换弹窗</button>
        <button onClick={() => updateState({ count: 10 })}>设置计数为10</button>
      </div>
    );
  }
}

// 把Redux状态映射到组件props
const mapStateToProps = (state: GlobalState) => ({
  count: state.count,
  isOpen: state.isOpen,
});

// 把状态更新动作映射到组件props
const mapDispatchToProps = (dispatch: any) => ({
  incrementCount: () => dispatch({ type: 'INCREMENT_COUNT' }),
  toggleIsOpen: () => dispatch({ type: 'TOGGLE_IS_OPEN' }),
  updateState: (payload: Partial<GlobalState>) => dispatch({ type: 'UPDATE_STATE', payload }),
});

// 连接组件到Redux
export default connect(mapStateToProps, mapDispatchToProps)(Class1);

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