zustand

社区版 Zustand 最佳实践

面向 React 应用中 Zustand 状态管理的全面性能与架构指南。包含 8 个类别、43 条规则，按影响程度从关键（store 架构、选择器优化）到渐进式（高级模式）排序。

适用场景

在以下情况下参考这些指南：

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

按优先级划分的规则类别

优先级	类别	影响	前缀
1	Store 架构	CRITICAL	store-
2	选择器优化	CRITICAL	select-
3	防止重新渲染	HIGH	render-
4	状态更新	MEDIUM-HIGH	update-
5	中间件配置	MEDIUM	mw-
6	SSR 与水合	MEDIUM	ssr-
7	TypeScript 模式	LOW-MEDIUM	ts-
8	高级模式	LOW	adv-

快速参考

1. Store 架构（CRITICAL）

• store-multiple-stores - 使用多个小型 store，而非一个庞大的 store
• store-separate-actions - 在专用命名空间中将操作与状态分开
• store-event-naming - 将操作命名为事件，而非 setter
• store-colocate-logic - 将操作与其修改的状态放在一起
• store-avoid-derived-state - 派生计算值，而非存储这些值
• store-domain-boundaries - 按功能领域组织 store

2. 选择器优化（CRITICAL）

• select-always-use - 始终使用选择器，切勿订阅整个 store
• select-atomic-picks - 对单个值使用原子选择器
• select-stable-returns - 确保选择器返回稳定的引用
• select-custom-hooks - 导出自定义 Hook，而非原始 store
• select-auto-generate - 为大型 store 使用自动生成的选择器
• select-memoize-computed - 对开销大的计算型选择器进行记忆化
• select-avoid-inline - 在组件外部定义选择器

3. 防止重新渲染（HIGH）

• render-use-shallow - 多属性选择时使用 useShallow
• render-equality-fn - 需要时提供自定义相等函数
• render-memo-children - 对受父组件 store 更新影响的子组件进行记忆化
• render-subscribe-external - 在非 React 使用方中使用 subscribe
• render-avoid-object-returns - 避免让选择器返回新对象
• render-split-components - 拆分组件，以尽量缩小订阅范围

4. 状态更新（MEDIUM-HIGH）

• 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 - 在组合后的 store 层级应用中间件

6. SSR 和水合（中）

• ssr-skip-hydration - 在 SSR 上下文中使用 skipHydration
• ssr-manual-rehydrate - 在客户端挂载时手动重新水合
• ssr-hydration-hook - 使用自定义 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 - 正确指定组合 store 的类型

8. 高级模式（低）

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

使用方法

阅读各个参考文件，了解详细说明和代码示例：

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

参考文件

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