SuperAPI AI 工具集

react-state-management

前端与建站

查看项目

更新于 10-16 02:32

技能介绍

用途:该技能面向 React 应用的状态管理,帮助在本地状态、全局状态、服务端状态、URL 状态与表单状态之间做区分与选型,并给出可执行的实现步骤与验证方式。

主要能力:按状态类别给出对应方案——本地状态用 useState/useReducer;全局状态用 Redux Toolkit、Zustand、Jotai;服务端状态用 React Query、SWR、RTK Query;URL 状态用 React Router、nuqs;表单状态用 React Hook Form、Formik。选型建议:小型应用简单状态选 Zustand 或 Jotai;大型复杂状态选 Redux Toolkit;服务端交互密集用 React Query 搭配轻量客户端状态;需要原子化细粒度更新用 Jotai。

使用方式:技能内含多种模式示例,包括 Zustand 基础 store(含 devtools、persist 中间件)、Redux Toolkit 配合 TypeScript 的 slice 与 createAsyncThunk、Zustand 分片(slices)扩展、Jotai 原子与派生/异步原子、React Query 的查询键工厂与乐观更新,以及客户端状态与服务端状态组合。

适用场景:搭建全局状态、在 Redux Toolkit/Zustand/Jotai 间选择、用 React Query 或 SWR 管理服务端状态、实现乐观更新、调试状态问题、从旧版 Redux 迁移到现代模式。

限制:资料未提供安装命令、版本要求、性能基准或收费信息;不适用于与 React 状态管理无关的任务。最佳实践建议状态就近放置、使用选择器避免多余渲染、规范化数据、全量 TypeScript 类型、区分服务端与客户端状态,避免过度全局化、重复存储服务端状态、直接修改状态、存储派生数据或混用范式。