在React中如何实现可跨多页面/组件更新的布尔类型全局状态？

方案1：React 内置 Context API（无第三方依赖，中小项目首选） #

适合项目没有接入第三方状态管理库的场景，完全基于React原生能力实现。

步骤1：创建全局Context与通用逻辑封装 #

// src/contexts/GlobalToggleContext.js
import { createContext, useContext, useState } from 'react';

const GlobalToggleContext = createContext();

// 全局Provider，需要包裹整个应用路由
export function GlobalToggleProvider({ children }) {
  // 共享的布尔类型状态
  const [isToggleOn, setIsToggleOn] = useState(false);

  // 统一封装状态更新+通用逻辑，避免多页面重复编写
  const handleToggle = () => {
    const newState = !isToggleOn;
    setIsToggleOn(newState);
    // 在此处添加所有通用逻辑：比如接口调用、埋点上报、全局提示等
    console.log('全局开关状态已更新为：', newState);
  };

  return (
    <GlobalToggleContext.Provider value={{ isToggleOn, handleToggle }}>
      {children}
    </GlobalToggleContext.Provider>
  );
}

// 封装自定义Hook，简化调用
export function useGlobalToggle() {
  return useContext(GlobalToggleContext);
}

步骤2：应用入口挂载Provider #

在项目入口文件（如main.jsx/index.js）中引入Provider包裹根组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { GlobalToggleProvider } from './contexts/GlobalToggleContext';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <GlobalToggleProvider>
    <App />
  </GlobalToggleProvider>
);

步骤3：封装通用复用按钮组件 #

// src/components/CommonToggleBtn.jsx
import { useGlobalToggle } from '../contexts/GlobalToggleContext';

export default function CommonToggleBtn() {
  const { isToggleOn, handleToggle } = useGlobalToggle();
  return (
    <button onClick={handleToggle}>
      {isToggleOn ? '关闭功能' : '开启功能'}
    </button>
  );
}

步骤4：任意页面直接调用 #

所有需要使用按钮、读取状态的页面，直接引入对应模块即可，状态全应用同步：

// 任意业务页面示例：src/pages/PageA.jsx
import CommonToggleBtn from '../components/CommonToggleBtn';
import { useGlobalToggle } from '../contexts/GlobalToggleContext';

export default function PageA() {
  const { isToggleOn } = useGlobalToggle();
  return (
    <div>
      <h2>页面A</h2>
      <CommonToggleBtn />
      <p>当前功能状态：{isToggleOn ? '已开启' : '已关闭'}</p>
      {/* 页面独有逻辑基于isToggleOn处理即可 */}
    </div>
  );
}

优化提示：如果项目体积较大、状态更新频繁，可通过拆分Context粒度、配合React.memo/useMemo优化子孙组件渲染性能。

方案2：轻量状态管理库实现（中大型项目首选） #

如果项目已经接入状态管理库，或后续全局状态复杂度会提升，可以直接用全局状态管理存放该共享状态，以下是Zustand的实现示例：

// src/store/useToggleStore.js
import { create } from 'zustand';

const useToggleStore = create((set) => ({
  isToggleOn: false,
  // 状态更新+通用逻辑统一封装
  handleToggle: () => set((state) => {
    const newState = !state.isToggleOn;
    // 在此处添加通用逻辑
    console.log('全局开关状态已更新为：', newState);
    return { isToggleOn: newState };
  })
}));

export default useToggleStore;

按钮组件和业务页面直接引入store调用即可，无需额外包裹Provider：

// 通用按钮组件
import useToggleStore from '../store/useToggleStore';

export default function CommonToggleBtn() {
  const { isToggleOn, handleToggle } = useToggleStore();
  return <button onClick={handleToggle}>{isToggleOn ? '关闭' : '开启'}</button>;
}

特殊场景补充 #

如果按钮固定在公共布局（如顶部导航、侧边栏）中，不需要每个页面单独引入，只需将按钮放在布局组件中，状态按上述方案管理即可，所有子页面都能读取到同步的状态值。

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