React 比较好的存储全局数据的方法 ？

作者站长头像
站长
· 阅读数 6

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

回复
1个回答
avatar
test
2024-06-28

用 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>
));
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容