react-state-management

# React 状态管理 现代 React 状态管理模式的综合指南，涵盖从本地组件状态到全局存储及服务器状态同步。 ## 何时不使用此技能 - 任务与 React 状态管理无关时 - 你需要此范围之外的其他领域或工具时 ## 指令 - 明确目标、约束和所需的输入。 - 应用相关的最佳实践并验证结果。 - 提供可操作的步骤和验证方法。 - 如果需要详细示例，请打开 `resources/implementation-playbook.md`。 ## 何时使用此技能 - 在 React 应用中设置全局状态管理时 - 在 Redux Toolkit、Zustand 或 Jotai 之间进行选择时 - 使用 React Query 或 SWR 管理服务器状态时 - 实现乐观更新时 - 调试状态相关问题时 - 从旧版 Redux 迁移到现代模式时 ## 核心概念 ### 1. 状态类别 | 类型 | 描述 | 解决方案 | |------|-------------|-----------| | **本地状态** | 组件特定，UI 状态 | useState, useReducer | | **全局状态** | 组件间共享 | Redux Toolkit, Zustand, Jotai | | **服务器状态** | 远程数据，缓存 | React Query, SWR, RTK Query | | **URL 状态** | 路由参数，搜索 | React Router, nuqs | | **表单状态** | 输入值，验证 | React Hook Form, Formik | ### 2. 选择标准 小型应用，简单状态 → Zustand 或 Jotai 大型应用，复杂状态 → Redux Toolkit 繁重的服务器交互 → React Query + 轻量级客户端状态 原子/细粒度更新 → Jotai ## 快速开始 ### Zustand (最简单) typescript // store/useStore.ts import { create } from 'zustand' import { devtools, persist } from 'zustand/middleware' interface AppState { user: User | null theme: 'light' | 'dark' setUser: (user: User | null) => void toggleTheme: () => void } export const useStore = create()( devtools( persist( (set) => ({ user: null, theme: 'light', setUser: (user) => set({ user }), toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })), }), { name: 'app-storage' } ) ) ) // 组件中使用 function Header() { const { user, theme, toggleTheme } = useStore() return (

{user?.name} 切换主题

) } ## 模式 ### 模式 1：TypeScript 版 Redux Toolkit typescript // st