SuperAPI AI 工具集

react-state-management

前端与建站

查看项目

更新于 10-15 23:41

技能介绍

用途:该技能用于 React 应用的状态管理决策与实现,涵盖本地状态、跨组件共享状态与服务端状态的方案选择。

主要能力:提供状态管理库速查表(Context 适用小型应用与主题、Zustand 适用简单全局状态、Jotai 适用原子化细粒度状态、TanStack Query 适用服务端状态与缓存、SWR 适用数据获取),并给出场景推荐表(简单本地状态用 useState,复杂本地状态用 useReducer,小型应用共享状态用 Context + useReducer,大型应用共享状态用 Zustand 或 Jotai,服务端状态用 TanStack Query 或 SWR)。内容包括 useState 组件状态、useReducer 配合 Context 的购物车示例、Theme 与 User Context 的创建与使用、通过拆分 Context、useMemo 与 useCallback 优化重渲染、Zustand 基础 store 及 persist、devtools、immer 中间件用法、SWR 基础用法与 useSWRMutation 变更。

使用方式:安装命令为 npm i zustand、npm i jotai、npm i @tanstack/react-query、npm i swr;Context 为 React 内置无需安装。Jotai 与 TanStack Query 的原子组合、查询客户端、变更、失效、乐观更新与缓存调优等详细模式位于 references/jotai-and-tanstack-query.md;更深入的 Zustand 模式(slices、中间件、测试)位于 references/zustand-patterns.md。React hooks 基础请参见 react-hooks-complete。

适用场景与限制:适用于选型、搭建 store、配置服务端状态缓存、实现乐观更新、规范化复杂状态结构、减少不必要重渲染。资料未提供收费、价格、平台与效果等事实。

最佳实践:避免 prop drilling;将嵌套状态规范化为 byId/allIds 结构。