学习#

#从这里开始

如果你是 Zustand 新手，请从这里开始，了解安装方式、整体概览，并完成一个动手教程。

• 简介 — 安装 Zustand 并创建你的第一个 store。
• 与其他工具的比较 — 了解 Zustand 与 Redux、Jotai、Recoil 等工具的对比。
• 教程：井字棋 — 通过构建一个完整的游戏，逐步学习 Zustand 的概念。

#核心概念

在 Zustand store 中读取和更新状态的基础知识。

• 更新状态 — 如何更新原始类型值、对象和嵌套状态。
• 不使用 store action 的实践 — 在 store 之外定义状态更新，以获得更简单的模式。
• 切片模式 — 将大型 store 拆分为更小、可组合的切片。
• 不可变状态与合并 — 理解 Zustand 如何合并状态，以及何时需要手动展开。
• Map 与 Set 的使用 — 在 Zustand 状态中正确使用 Map 和 Set。

#性能与渲染

让重新渲染尽可能少、组件保持快速的技术。

• 使用 useShallow 避免重新渲染 — 在选择对象时使用浅比较，避免不必要的重新渲染。
• 通过 URL hash 连接状态 — 将 store 状态与 URL hash 同步，让 UI 状态可分享。
• React 18 之前的事件处理器 — 处理 React 17 及更早版本中批处理的边界情况。

#TypeScript 路径

关于使用 TypeScript 为 store、action 和选择器编写类型标注的指南。

• TypeScript 入门 — 为包含状态和 action 的基础 store 添加类型。
• TypeScript 进阶 — 为切片、中间件栈和复杂模式添加类型。
• 自动生成选择器 — 根据 store 定义自动生成带类型的选择器。

#框架与平台

在服务端渲染和特定框架环境中使用 Zustand。

• Next.js — 在 Next.js 应用中正确配置 Zustand 并处理 SSR。
• SSR 与水合 — 在服务端渲染时避免水合不匹配。
• 使用 props 初始化状态 — 用 React 组件的 props 设置 store 的初始状态。

#测试与质量

使用 Zustand 编写可靠、可维护代码的最佳实践。

• 测试 store 与组件 — 测试 store 逻辑以及使用 store 的 React 组件。
• 受 Flux 启发的实践 — 应用 Flux 约定，让状态变化保持可预测。
• 如何重置状态 — 按需将 store 重置回初始状态。