React中能否实现全局状态跨函数共享？附Hook违规示例咨询

可以实现你要的「单文件内定义全局状态，让不同函数/组件渲染并修改」的功能，但你写的示例会触发Hook违规错误，原因有两个：

1. 每次调用globalState()都会新建一个独立的useState实例，组件和setStateFunctions拿到的根本不是同一个状态，完全达不到共享效果
2. setStateFunctions.setText是普通函数，在里面调用globalState()相当于在非组件/非自定义Hook的地方调用React Hook，违反了Hook必须在组件或自定义Hook顶层调用的规则

下面给你两种可行的实现方式：

方式一：React Context + useState（官方推荐） #

这是React官方支持的全局状态方案，能在单文件内完成，同时保证状态共享和组件正确渲染：

import { useState, createContext, useContext, Fragment, ReactNode } from "react";

// 1. 创建全局状态的上下文
const GlobalStateContext = createContext<{
  state: string | undefined;
  setText: (text: string) => void;
} | null>(null);

// 2. 实现状态提供者组件，管理全局状态和修改方法
export const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
  const [state, setState] = useState<string>();

  const setText = (text: string) => {
    setState(text);
  };

  return (
    <GlobalStateContext.Provider value={{ state, setText }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

// 3. 自定义Hook，简化组件获取全局状态的逻辑
const useGlobalState = () => {
  const context = useContext(GlobalStateContext);
  if (!context) {
    throw new Error("useGlobalState必须在GlobalStateProvider内部使用");
  }
  return context;
};

// 4. 使用全局状态的组件
const Component = () => {
  const { state, setText } = useGlobalState();

  return (
    <Fragment>
      <div onClick={() => setText('Hello World')}>DisplayText</div>
      <div>{state}</div>
    </Fragment>
  );
};

// 5. （可选）组件外部修改状态的方法
let globalSetText: ((text: string) => void) | undefined;

// 如果你需要在组件外部修改状态，可以用这个带外部访问的Provider
export const GlobalStateProviderWithExternalAccess = ({ children }: { children: ReactNode }) => {
  const [state, setState] = useState<string>();

  const setText = (text: string) => {
    setState(text);
  };

  // 将set方法挂载到模块变量，供外部调用
  globalSetText = setText;

  return (
    <GlobalStateContext.Provider value={{ state, setText }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

export const setStateFunctions = {
  setText: (text: string) => {
    globalSetText?.(text);
  }
};

export { Component };

使用时需要把根组件（或需要共享状态的组件树）包裹在GlobalStateProvider或GlobalStateProviderWithExternalAccess内部，这样所有子组件都能通过useGlobalState获取和修改全局状态。

方式二：模块级变量 + 监听机制（适合简单场景） #

如果你的全局状态逻辑很简单，也可以用模块级变量配合监听函数实现，不过这不是React官方推荐的方案，复杂度高时容易出问题：

import { useState, useEffect, Fragment } from "react";

// 模块级变量存储全局状态
let globalState: string | undefined;
// 存储组件的监听函数，状态变化时触发更新
const updateListeners = new Set<() => void>();

// 修改全局状态的方法
const setGlobalText = (text: string) => {
  globalState = text;
  // 通知所有监听的组件重新渲染
  updateListeners.forEach(listener => listener());
};

// 自定义Hook，让组件获取状态并监听变化
const useGlobalState = () => {
  // 用空对象触发组件强制更新
  const [, forceRender] = useState({});

  useEffect(() => {
    const listener = () => forceRender({});
    updateListeners.add(listener);
    // 组件卸载时移除监听
    return () => updateListeners.delete(listener);
  }, []);

  return {
    state: globalState,
    setText: setGlobalText
  };
};

// 使用全局状态的组件
const Component = () => {
  const { state, setText } = useGlobalState();

  return (
    <Fragment>
      <div onClick={() => setText('Hello World')}>DisplayText</div>
      <div>{state}</div>
    </Fragment>
  );
};

// 外部修改状态的函数
export const setStateFunctions = {
  setText: setGlobalText
};

export { Component };

这个方案通过模块变量存状态，用监听函数集合触发组件更新，适合简单的全局状态场景，但状态逻辑复杂时，不如Context方案清晰可控。

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