Zustand状态管理最佳实践Skill zustand

---

name: zustand description: Zustand状态管理在React应用中的最佳实践。在编写、审查或重构Zustand存储时使用，以确保最佳性能和可维护性。在涉及状态管理、存储、选择器、重新渲染和Zustand模式的任务中触发。

社区Zustand最佳实践

React应用中Zustand状态管理的全面性能和架构指南。包含8个类别中的43条规则，按影响优先级从关键（存储架构、选择器优化）到增量（高级模式）排序。

何时应用

参考这些指南当：

• 创建新的Zustand存储
• 使用选择器优化重新渲染性能
• 实现持久化或中间件
• 将Zustand与SSR/Next.js集成
• 审查代码中的状态管理模式

按优先级排序的规则类别

优先级	类别	影响	前缀
1	存储架构	关键	store-
2	选择器优化	关键	select-
3	重新渲染预防	高	render-
4	状态更新	中高	update-
5	中间件配置	中	mw-
6	SSR和水合	中	ssr-
7	TypeScript模式	低中	ts-
8	高级模式	低	adv-

快速参考

1. 存储架构（关键）

• store-multiple-stores - 使用多个小存储而不是一个单一的大存储
• store-separate-actions - 在专用命名空间中分离动作和状态
• store-event-naming - 将动作命名为事件而不是设置器
• store-colocate-logic - 将动作与它们修改的状态放在一起
• store-avoid-derived-state - 派生计算值而不是存储它们
• store-domain-boundaries - 按功能领域组织存储

2. 选择器优化（关键）

• select-always-use - 总是使用选择器，从不订阅整个存储
• select-atomic-picks - 对单个值使用原子选择器
• select-stable-returns - 确保选择器返回稳定引用
• select-custom-hooks - 导出自定义钩子而不是原始存储
• select-auto-generate - 对大型存储使用自动生成的选择器
• select-memoize-computed - 备忘录化昂贵的计算选择器
• select-avoid-inline - 在组件外部定义选择器

3. 重新渲染预防（高）

• render-use-shallow - 对多属性选择使用useShallow
• render-equality-fn - 需要时提供自定义相等函数
• render-memo-children - 备忘录受父存储更新影响的子组件
• render-subscribe-external - 对非React消费者使用subscribe
• render-avoid-object-returns - 避免从选择器返回新对象
• render-split-components - 拆分组件以最小化订阅范围

4. 状态更新（中高）

• update-functional-set - 当基于先前状态更新时使用函数形式
• update-immutable - 永远不要直接突变状态
• update-shallow-merge - 理解set()的浅合并行为
• update-async-actions - 处理带有加载和错误状态的异步动作
• update-batch-updates - 在单个set调用中批处理相关更新

5. 中间件配置（中）

• mw-devtools-actions - 为DevTools调试命名动作
• mw-persist-partialize - 使用partialize进行选择性持久化
• mw-persist-migration - 版本化和迁移持久化状态
• mw-immer-nested - 对深度嵌套状态更新使用immer
• mw-combine-order - 以正确顺序应用中间件
• mw-slice-middleware - 在组合存储级别应用中间件

6. SSR和水合（中）

• ssr-skip-hydration - 在SSR上下文中使用skipHydration
• ssr-manual-rehydrate - 在客户端挂载时手动重新水合
• ssr-hydration-hook - 使用自定义钩子防止水合不匹配
• ssr-check-window - 用typeof window检查保护浏览器API

7. TypeScript模式（低中）

• ts-state-creator - 对切片类型使用StateCreator
• ts-middleware-inference - 使用中间件保留类型推断
• ts-separate-types - 分离状态和动作接口
• ts-generic-selectors - 为可重用性类型化选择器
• ts-bound-store - 正确类型化组合存储

8. 高级模式（低）

• adv-context-stores - 将Zustand与React Context结合用于依赖注入
• adv-transient-updates - 对临时更新使用subscribe
• adv-computed-getters - 用getter实现计算状态
• adv-third-party-integration - 与React Query和SWR集成

如何使用

阅读个别参考文件以获取详细解释和代码示例：

• 部分定义 - 类别结构和影响级别
• 规则模板 - 添加新规则的模板

参考文件

文件	描述
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则的模板
metadata.json	版本和参考信息