SuperAPI AI 工具集

zustand

前端与建站

查看项目

更新于 10-16 03:46

技能介绍

用途:该技能提供社区整理的 Zustand 状态管理性能与架构规范,适用于创建新的 Zustand store、用选择器优化重渲染性能、实现持久化或中间件、将 Zustand 集成到 SSR/Next.js,以及审查状态管理代码模式时参考。

主要能力与规则分类(按优先级):

  1. Store 架构(关键,store- 前缀):使用多个小型 store 而非单一巨型 store;将 actions 与 state 分离到专门命名空间;动作按事件而非 setter 命名;动作与被修改状态就近放置;派生值应计算而非存储;按功能域组织 store。
  2. 选择器优化(关键,select- 前缀):始终使用选择器,绝不订阅整个 store;单值用原子选择器;确保选择器返回稳定引用;导出自定义 hook 而非原始 store;大型 store 用自动生成选择器;对昂贵计算选择器做记忆化;在组件外部定义选择器。
  3. 防止重渲染(高,render- 前缀):多属性选择用 useShallow;需要时提供自定义相等函数;对受父级 store 更新影响的子组件做 memo;非 React 消费者用 subscribe;避免选择器返回新对象;拆分组件以缩小订阅范围。
  4. 状态更新(中高,update- 前缀):基于前一状态更新时用函数式写法;绝不直接修改 state;理解 set() 浅合并行为;异步动作处理 loading 与 error 状态;相关更新合并到单次 set 调用。
  5. 中间件配置(中,mw- 前缀):为动作命名以便 DevTools 调试;持久化用 partialize 做选择性存储;对持久化状态做版本与迁移;深层嵌套更新用 immer;按正确顺序应用中间件;在合并 store 层级应用中间件。
  6. SSR 与水合(中,ssr- 前缀):SSR 上下文使用 skipHydration;客户端挂载时手动 rehydrate;用自定义 hook 防止水合不匹配;用 typeof window 检查保护浏览器 API。
  7. TypeScript 模式(低中,ts- 前缀):用 StateCreator 为 slice 标注类型;中间件保持类型推断;分离 state 与 actions 接口;选择器泛型化以复用;正确标注合并 store。
  8. 高级模式(低,adv- 前缀):结合 React Context 做依赖注入;用 subscribe 做瞬态更新;用 getters 实现计算状态;与 React Query 和 SWR 集成。

使用方式:按类别阅读各参考文件获取详细说明与代码示例,参考 _sections.md 了解分类结构与影响级别,_template.md 用于新增规则。

限制:资料未提供具体版本要求、安装命令、授权方式与价格信息,暂未提供。