React应用中全局共享登录用户状态的正确实现方式是什么？

针对你提到的需要全局访问登录用户信息的场景，最原生且无需引入第三方依赖的方案是使用React Context API，实现步骤如下：

步骤1：创建用户全局上下文 #

新建独立的上下文文件 src/contexts/UserContext.js：

import { createContext, useContext } from 'react';

// 创建上下文
const UserContext = createContext();

// 封装自定义Hook，简化后续调用
export const useUserContext = () => useContext(UserContext);

// 导出Provider组件，用于包裹需要共享状态的组件树
export const UserProvider = UserContext.Provider;

步骤2：在App组件中注入全局状态 #

修改你的App组件，用UserProvider包裹所有需要访问用户信息的子组件：

import { UserProvider } from './contexts/UserContext';

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

    return (
        <UserProvider value={{user, setUser}}>
            <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>
        </UserProvider>
    );
};

步骤3：任意组件中访问/修改用户信息 #

不需要props传递，直接调用自定义Hook即可获取全局的user和setUser方法，举两个示例：

• 登录页存储用户信息：

import { useUserContext } from '../contexts/UserContext';

const Login = () => {
    const { setUser } = useUserContext();
    // 登录接口调用成功后，写入全局用户信息
    const handleLoginSuccess = (userInfo) => {
        setUser(userInfo);
    }
    // 其余逻辑省略
}

• 顶部导航栏展示用户名：

import { useUserContext } from '../contexts/UserContext';

const Topbar = () => {
    const { user } = useUserContext();
    return <div>{user ? `欢迎，${user.nickname}` : '请登录'}</div>
}

可选替代方案 #

如果你的项目已经接入了状态管理工具，可以直接将用户信息存入全局状态池：

• 项目已用Redux：将user存在store中，通过useSelector、useDispatch访问修改
• 想使用更轻量的第三方方案：可以选择Zustand、Jotai等轻量化状态管理库，无需嵌套Provider即可实现全局状态共享，代码更简洁。

内容的提问来源于stack exchange，提问作者demiglace