当前位置：首页 > React

react如何定义全局变量

2026-03-11 10:50:17React

在React中定义全局变量可以通过多种方式实现，具体取决于应用场景和需求。以下是几种常见方法：

使用Context API

Context API适合在组件树中跨层级共享数据。创建一个Context对象，并通过Provider传递值。

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

const GlobalContext = createContext();

export const GlobalProvider = ({ children }) => {
  const sharedValue = { theme: 'dark', user: 'admin' };

  return (
    <GlobalContext.Provider value={sharedValue}>
      {children}
    </GlobalContext.Provider>
  );
};

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

使用时在根组件包裹GlobalProvider，子组件通过useGlobal钩子访问数据。

使用状态管理库（如Redux）

Redux适合复杂状态管理。定义全局store并通过Provider注入。

import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const store = configureStore({
  reducer: {
    global: (state = { theme: 'light' }) => state
  }
});

const App = () => (
  <Provider store={store}>
    <ChildComponent />
  </Provider>
);

子组件通过useSelector和useDispatch访问或修改状态。

使用window对象

简单场景下可直接挂载到window对象，但需注意命名冲突。

window.appConfig = { apiUrl: 'https://example.com' };

使用环境变量

通过.env文件定义全局配置，适用于构建时确定的变量。

REACT_APP_API_KEY=12345

通过process.env.REACT_APP_API_KEY访问。

使用自定义Hook

封装自定义Hook管理全局状态，结合useState和useEffect。

react如何定义全局变量

import { useState, useEffect } from 'react';

const useGlobalConfig = () => {
  const [config, setConfig] = useState({});

  useEffect(() => {
    setConfig({ theme: 'dark' });
  }, []);

  return config;
};