当前位置：首页 > React

react如何管理全局参数

2026-03-31 14:03:56React

使用 Context API

Context API 是 React 内置的全局状态管理方案，适合跨组件共享数据。创建一个 Context 并通过 Provider 传递数据，子组件通过 useContext 或 Consumer 访问。

import React, { createContext, useContext } from 'react';

const GlobalContext = createContext();

export const GlobalProvider = ({ children }) => {
  const sharedData = { theme: 'dark', user: 'admin' };
  return (
    <GlobalContext.Provider value={sharedData}>
      {children}
    </GlobalContext.Provider>
  );
};

export const useGlobal = () => useContext(GlobalContext);

在根组件包裹 GlobalProvider，子组件调用 useGlobal() 即可获取全局参数。

使用状态管理库（Redux/Zustand）

对于复杂场景，Redux 或 Zustand 提供更强大的状态管理。以 Zustand 为例：

import create from 'zustand';

const useStore = create((set) => ({
  theme: 'light',
  setTheme: (newTheme) => set({ theme: newTheme }),
}));

function Component() {
  const { theme, setTheme } = useStore();
  return <button onClick={() => setTheme('dark')}>{theme}</button>;
}

Zustand 的轻量 API 适合快速实现全局状态共享。

通过 Props 层层传递

适用于简单应用，将参数从顶层组件通过 Props 逐层传递。但嵌套过深时会导致“Prop Drilling”问题，维护性较差。

function Parent() {
  const globalParam = { config: 'default' };
  return <Child data={globalParam} />;
}

function Child({ data }) {
  return <GrandChild data={data} />;
}

使用本地存储（localStorage）

持久化全局参数可通过 localStorage 存储，结合 useEffect 同步状态。

const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

useEffect(() => {
  localStorage.setItem('theme', theme);
}, [theme]);

此方法适合需要长期保存的配置，如用户主题偏好。

自定义 Hook 封装

将全局逻辑封装为自定义 Hook，方便多处复用。例如：

react如何管理全局参数

function useGlobalConfig() {
  const [config, setConfig] = useState({ lang: 'en' });
  const updateConfig = (key, value) => {
    setConfig(prev => ({ ...prev, [key]: value }));
  };
  return { config, updateConfig };
}

组件中调用 useGlobalConfig() 即可访问和修改全局配置。