react.js - React 比较好的存储全局数据的方法 ？

Question

例如登录后存储当前登录用户的信息：id 那么总不能用到的时候每次都去请求，那么 useContext 是不是用来解决这个问题的，还有有更好的解决方案？不懂

Answer 1

简单一点可以挂在window上，但是数据更新时，就无法自动渲染。

如果要使用状态管理库，我推荐使用zustand，原生支持hook写法，简单快速。

根据你的需求，首先我们导出了一个名为 useUserStore 的函数，该函数使用 create 方法创建了一个新的状态存储。该存储包含一个 currentUser 属性和一个 setCurrentUser 方法，用于设置当前登录用户。

import create from 'zustand'export const useUserStore = create((set) => ({  currentUser: null,  setCurrentUser: (user) => set(() => ({ currentUser: user })),}))

在组件中使用 store：

import { useUserStore } from './userStore'function UserInfo() {  const { currentUser } = useUserStore()  return (    <div>      <p>User ID: {currentUser.id}</p>      <p>User Name: {currentUser.name}</p>    </div>  )}

Answer 2

除了使用 Redux 等状态管理，还可以使用黑科技，将全局变量储存到 window 或 globalThis 对象上：

window.globalState = {};globalState.id = id;

但是这样还不能持久化，页面刷新变量会重新赋值，id 也需要重新请求。还需要配合 localStorage 和 sessionStorage 将状态保存下来。

你可以将这个 globalState 封装好，暴露 getGlobalValue 和 setGlobalValue 方法；

注意，只有当数据比较少的时候可以使用这种方式，如果数据比较多，状态比较复杂，还是应该用状态管理。

Answer 3

存储 Storage

Answer 4

Redux 中文官网

Answer 5

用 useContext 和 useReducer 或者 useState，轻量级的解决方案：

const UserContext = React.createContext();function UserProvider({ children }) {  const [user, setUser] = useState(null);  return (    <UserContext.Provider value={{ user, setUser }}>      {children}    </UserContext.Provider>  );}function useUser() {  const context = useContext(UserContext);  if (!context) {    throw new Error("useUser must be used within a UserProvider");  }  return context;}// 在组件里用function Profile() {  const { user } = useUser();  return <div>{user.id}</div>;}

或者用 MobX：

import { observable } from 'mobx';import { observer } from 'mobx-react';class UserStore {  @observable user = null;}const userStore = new UserStore();const Profile = observer(() => (  <div>{userStore.user.id}</div>));