React Native + TypeScript 全局用户接口实现可行性咨询

当然可行，完全不需要在每个组件里重复定义[user, setUser]状态，下面给你两种常用的实现方案，适配不同规模的项目：

一、React Context API（轻量级场景首选） #

这是React内置的全局状态方案，适合小型到中型项目，不需要额外安装依赖。

1. 创建全局上下文文件（比如UserContext.js）：

import { createContext, useContext, useState } from 'react';

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

// 封装Provider组件，包裹整个应用
export function UserProvider({ children }) {
  // 初始化用户状态，注意：密码不要存在全局状态里，避免内存泄露带来的安全风险
  const [user, setUser] = useState({
    username: '',
    email: '',
    token: ''
  });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 封装自定义Hook，简化组件调用
export function useUser() {
  return useContext(UserContext);
}

2. 在根组件（比如App.js）中包裹Provider：

import { UserProvider } from './UserContext';
import { Routes, Route } from 'react-router-dom';
import LoginPage from './LoginPage';
import RegisterPage from './RegisterPage';

function App() {
  return (
    <UserProvider>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
        {/* 其他路由 */}
      </Routes>
    </UserProvider>
  );
}

export default App;

3. 在任意组件中使用全局状态：

import { useUser } from './UserContext';

function LoginPage() {
  const { user, setUser } = useUser();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 模拟登录请求，拿到后端返回的token、用户名等信息
    const loginResult = {
      username: 'test_user',
      email: 'test@example.com',
      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
    };
    // 更新全局用户状态
    setUser(loginResult);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="用户名"
        value={user.username}
        onChange={(e) => setUser(prev => ({ ...prev, username: e.target.value }))}
      />
      {/* 其他表单元素 */}
      <button type="submit">登录</button>
    </form>
  );
}

export default LoginPage;

二、状态管理库（中大型项目首选） #

如果项目规模较大，状态逻辑复杂，可以用更高效的状态管理库，比如Zustand（轻量无冗余代码）、Redux Toolkit等。这里以Zustand为例：

1. 安装依赖：

npm install zustand
# 或
yarn add zustand

2. 创建全局状态store（比如userStore.js）：

import { create } from 'zustand';

export const useUserStore = create((set) => ({
  // 用户状态，同样不存密码
  userInfo: {
    username: '',
    email: '',
    token: ''
  },
  // 更新用户状态的方法
  updateUserInfo: (newInfo) => set((state) => ({
    userInfo: { ...state.userInfo, ...newInfo }
  })),
  // 退出登录时清空状态
  clearUserInfo: () => set(() => ({
    userInfo: { username: '', email: '', token: '' }
  }))
}));

3. 在组件中直接使用：

import { useUserStore } from './userStore';

function RegisterPage() {
  // 按需获取状态和方法
  const updateUserInfo = useUserStore(state => state.updateUserInfo);
  const userInfo = useUserStore(state => state.userInfo);

  const handleRegister = (e) => {
    e.preventDefault();
    // 模拟注册成功后拿到用户信息
    const registerResult = {
      username: 'new_user',
      email: 'new@example.com'
    };
    updateUserInfo(registerResult);
  };

  return (
    <form onSubmit={handleRegister}>
      <input
        type="email"
        placeholder="邮箱"
        value={userInfo.email}
        onChange={(e) => updateUserInfo({ email: e.target.value })}
      />
      {/* 其他表单元素 */}
      <button type="submit">注册</button>
    </form>
  );
}

export default RegisterPage;

重要提醒 #

绝对不要在全局状态中存储用户密码！密码只需要在登录/注册时用于接口验证，验证通过后即可丢弃，全局状态只保留token、用户名、邮箱这类非敏感信息。

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