react如何存储全局变量
在React中存储全局变量可以通过多种方式实现，具体选择取决于应用场景和需求复杂度。以下是几种常见方法：
使用Context API
Context API是React官方提供的跨组件数据共享方案，适合管理全局状态或主题等数据。
创建一个Context对象并导出，通过Provider包裹顶层组件，子组件通过useContext钩子访问数据。
const GlobalContext = React.createContext();
function App() {
const [globalData, setGlobalData] = useState({});
return (
<GlobalContext.Provider value={{ globalData, setGlobalData }}>
<ChildComponent />
</GlobalContext.Provider>
);
}
function ChildComponent() {
const { globalData } = useContext(GlobalContext);
return <div>{globalData.key}</div>;
}使用状态管理库（如Redux/Zustand）
Redux等库适合复杂状态管理，提供可预测的状态更新机制。
安装Redux后创建store，通过useSelector和useDispatch访问和更新状态。
import { configureStore, createSlice } from '@reduxjs/toolkit';
const globalSlice = createSlice({
name: 'global',
initialState: { value: 0 },
reducers: { update: (state) => { state.value += 1; } }
});
const store = configureStore({ reducer: globalSlice.reducer });
function Component() {
const count = useSelector((state) => state.global.value);
const dispatch = useDispatch();
return <button onClick={() => dispatch(globalSlice.actions.update())}>{count}</button>;
}使用Window对象
简单场景下可直接挂载到window对象，但需注意命名冲突和类型安全。
window.appConfig = { apiUrl: 'https://example.com' };
// 任意组件中访问
console.log(window.appConfig.apiUrl);使用自定义Hook封装
通过自定义Hook封装全局逻辑，结合Context或闭包实现数据共享。
function useGlobalData() {
const [data, setData] = useState(initialData);
return { data, setData };
}
// 多个组件中调用useGlobalData()获取同一份数据使用本地存储（localStorage/sessionStorage）
持久化存储全局数据，但需注意同步问题和存储限制。
// 设置数据
localStorage.setItem('theme', 'dark');
// 读取数据
const theme = localStorage.getItem('theme');选择方案时需权衡以下因素：
- 数据是否需要响应式更新（Context/Redux适合动态数据）
- 是否需要持久化（本地存储适合长期保留的数据）
- 项目复杂度（小型项目可用Context，大型项目推荐Redux/Zustand）
