react如何定义全局变量

在React中定义全局变量

使用React.createContext创建全局上下文，适用于需要跨组件共享的状态或数据。

const GlobalContext = React.createContext();

在顶层组件中使用Provider包裹子组件，并通过value传递全局变量。

<GlobalContext.Provider value={{ globalVar: 'value' }}>
  <App />
</GlobalContext.Provider>

在子组件中通过useContext钩子访问全局变量。

const { globalVar } = useContext(GlobalContext);

使用window对象定义全局变量

在非严格模式下可以直接挂载到window对象上，但需谨慎使用以避免命名冲突。

window.globalVar = 'value';

在任何组件中通过window.globalVar直接访问。

console.log(window.globalVar);

通过状态管理库实现全局变量

使用Redux等状态管理库创建全局store，适合复杂应用场景。

import { createStore } from 'redux';
const store = createStore(reducer);

通过Provider注入到组件树。

<Provider store={store}>
  <App />
</Provider>

在组件中使用useSelector获取全局状态。

const globalVar = useSelector(state => state.globalVar);

使用自定义Hook封装全局逻辑

创建自定义Hook来管理需要全局访问的数据，结合useState和useEffect实现响应式更新。

const useGlobalVar = () => {
  const [value, setValue] = useState(initialValue);
  return { value, setValue };
};

通过环境变量配置全局常量

在项目根目录创建.env文件定义不会改变的全局常量。

REACT_APP_API_URL=https://api.example.com

通过process.env访问环境变量。

const apiUrl = process.env.REACT_APP_API_URL;

注意：所有自定义环境变量必须以REACT_APP_开头才能在React应用中生效。