进行全局状态的正确方法是什么？

Question

我有一个应用程序，我希望应用程序组件保存当前登录的用户。我有以下路线和组件。

基本上，我的应用程序中的每个组件都会使用用户对象。当然，我可以将用户作为 props 传递给每个组件，但这并不优雅。全局共享 user prop 的正确 React 方式是什么？

const App = () => {
    const [user, setUser] = useState(null);

    return (
        <Router>
            <div className="app">
                <Topbar />
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <Route path="/home" exact component={Home} />
                    <Route path="/" exact component={ShopMenu} />
                    <Route path="/orders">
                        <Orders />
                    </Route>
                    <Route path="/wishlist" exact component={Wishlist} />
                    <Route path="/wallet" exact component={Wallet} />
                    <Route path="/cart" exact component={Cart} />
                </Switch>
                <BottomBar />
            </div>
        </Router>
    );
};

Answer 1

当您使用钩子时，请查看React Context，更具体地说是 useContext 。

上下文的想法正是如此 - 让您能够将可更新的状态共享给后代，而不必将其从一个组件传递到另一个组件（所谓的“prop-drilling”）。

export const UserContext = React.createContext(null);

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <Router>
      <div className="app">
        <UserContext.Provider value={{ user: user, setUser: setUser }}>
          <Topbar />
          <Switch>
             {/* <routes>... */}
          </Switch>
          <BottomBar />
        </UserContext.Provider>
      </div>
    </Router>
  );
};

然后，在您的组件中：

import { UserContext } from './app';

const Topbar = () => {
  const { user, setUser } = useContext(UserContext);

  // use `user` here
};

如果您想访问 setter ( setUser)，您也可以通过上下文传递它。