react如何管理全局参数

使用Context API管理全局参数

Context API是React内置的全局状态管理方案，适合跨组件共享数据。通过React.createContext创建上下文，配合Provider和useContext实现数据传递。

实现步骤：

1. 创建Context对象：

   const GlobalContext = React.createContext();

2. 使用Provider包裹组件树并传递值：

   function App() {
   const [globalParam, setGlobalParam] = useState("初始值");
   return (
    <GlobalContext.Provider value={{ globalParam, setGlobalParam }}>
      <ChildComponent />
    </GlobalContext.Provider>
   );
   }

3. 在子组件中通过useContext获取值：

   function ChildComponent() {
   const { globalParam, setGlobalParam } = useContext(GlobalContext);
   return <div>{globalParam}</div>;
   }

使用Redux管理全局参数

Redux适合复杂应用的状态管理，提供集中式存储和可预测的状态更新。

核心步骤：

1. 安装Redux相关库：

   

   npm install redux react-redux

2. 创建Store和Reducer：

   import { createStore } from 'redux';
   const initialState = { globalParam: "默认值" };
   const reducer = (state = initialState, action) => {
   switch (action.type) {
    case "UPDATE_PARAM":
      return { ...state, globalParam: action.payload };
    default:
      return state;
   }
   };
   const store = createStore(reducer);

3. 通过Provider连接React应用：

   import { Provider } from 'react-redux';
   function App() {
   return (
    <Provider store={store}>
      <ChildComponent />
    </Provider>
   );
   }

4. 在组件中使用useSelector和useDispatch：

   import { useSelector, useDispatch } from 'react-redux';
   function ChildComponent() {
   const globalParam = useSelector(state => state.globalParam);
   const dispatch = useDispatch();
   const updateParam = () => dispatch({ type: "UPDATE_PARAM", payload: "新值" });
   return <button onClick={updateParam}>{globalParam}</button>;
   }

使用Zustand管理全局参数

Zustand是轻量级状态管理库，简化了全局状态的逻辑。

实现方式：

1. 安装Zustand：

   npm install zustand

2. 创建Store：

   import create from 'zustand';
   const useStore = create(set => ({
   globalParam: "默认值",
   setGlobalParam: (value) => set({ globalParam: value })
   }));

3. 在组件中直接使用：

   function ChildComponent() {
   const { globalParam, setGlobalParam } = useStore();
   return <div onClick={() => setGlobalParam("更新值")}>{globalParam}</div>;
   }

通过LocalStorage持久化全局参数

若需持久化全局参数，可结合浏览器存储：

const [globalParam, setGlobalParam] = useState(
  localStorage.getItem("globalParam") || "初始值"
);
useEffect(() => {
  localStorage.setItem("globalParam", globalParam);
}, [globalParam]);

方案对比

• Context API：适合中小型应用，无需额外依赖。
• Redux：适合大型应用，提供中间件支持（如异步处理）。
• Zustand：API简洁，性能优化更灵活。
• LocalStorage：需手动同步，适合简单持久化需求。

根据项目复杂度选择合适方案，轻量场景推荐Context或Zustand，复杂场景可选Redux。