状态管理

状态管理的演变

React 生态的状态管理方案经历了激烈的演变：早期 Redux 一统天下，但样板代码繁多；MobX 以响应式编程简化了写法；Recoil 尝试原子化状态；Zustand 以极简 API 赢得青睐；而 React Query 的出现让人们意识到：大多数"全局状态"其实根本不是客户端状态，而是服务端状态。

在 React Native 应用中，状态可以分为两大类，它们有根本性的不同，需要用不同工具管理：

核心名词解释

状态流向图

Zustand：轻量全局状态

Zustand 是目前 React Native 社区最受欢迎的全局状态库之一。它的核心优势是：无需 Provider 包裹，任何组件都可以直接访问 Store；选择器机制确保只有订阅的状态变化时才重渲染。

// store/authStore.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface User {
  id: string;
  name: string;
  avatar: string;
}

interface AuthState {
  user: User | null;
  token: string | null;
  isLoggedIn: boolean;
  login: (user: User, token: string) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  // persist 中间件：自动持久化到 AsyncStorage
  persist(
    (set) => ({
      user: null,
      token: null,
      isLoggedIn: false,
      login: (user, token) => set({ user, token, isLoggedIn: true }),
      logout: () => set({ user: null, token: null, isLoggedIn: false }),
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

// 使用：只订阅 user，user 变化才重渲染，token 变化不触发
function ProfileHeader() {
  const user = useAuthStore(state => state.user); // 精确订阅
  const logout = useAuthStore(state => state.logout);

  if (!user) return null;
  return (
    <View>
      <Text>{user.name}</Text>
      <Pressable onPress={logout}><Text>退出</Text></Pressable>
    </View>
  );
}

React Query：服务端状态管理

// App.tsx — 配置 QueryClient
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,    // 5分钟内不重新请求
      retry: 2,                       // 失败重试2次
      refetchOnWindowFocus: false,   // App 切回前台时不自动刷新
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 导航和其他内容 */}
    </QueryClientProvider>
  );
}

// hooks/usePosts.ts — 封装数据请求
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../lib/api';

export function usePosts() {
  return useQuery({
    queryKey: ['posts'],           // 缓存键，唯一标识这份数据
    queryFn: () => api.getPosts(),
  });
}

export function useLikePost() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (postId: string) => api.likePost(postId),
    // 乐观更新：先修改本地缓存，成功后服务器已同步，失败则回滚
    onMutate: async (postId) => {
      await queryClient.cancelQueries({ queryKey: ['posts'] });
      const prev = queryClient.getQueryData(['posts']);
      queryClient.setQueryData(['posts'], (old: Post[]) =>
        old.map(p => p.id === postId ? { ...p, likes: p.likes + 1 } : p)
      );
      return { prev }; // 快照，用于回滚
    },
    onError: (_, __, ctx) => {
      if (ctx?.prev) queryClient.setQueryData(['posts'], ctx.prev);
    },
  });
}

Context：轻量全局状态

Context 不需要引入额外依赖，适合不频繁更新的全局数据（主题、语言、已登录用户）。关键是要避免 Context 粒度过粗——把所有全局状态塞进一个 Context 会导致任何一个状态变化都重渲染所有消费者。

// contexts/ThemeContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

type Theme = 'dark' | 'light';

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('dark');
  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 封装为自定义 Hook，提供类型安全和友好错误信息
export function useTheme(): ThemeContextType {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme 必须在 ThemeProvider 内使用');
  return ctx;
}