Zustand 是一个轻量级的状态管理库，适用于 React 应用程序。它以简单易用、高性能和无模板代码的特性受到开发者的喜爱。

https://zustand.docs.pmnd.rs/guides/tutorial-tic-tac-toe

以下是 Zustand 的核心特点和用法简介：

Zustand 核心特点

1. 轻量简单：
   • Zustand 使用简单的 API 来创建和管理状态，几乎没有学习曲线。
   • 没有额外的模板代码，例如 action 或 reducer。
2. 性能优异：
   • 通过浅比较，只更新真正需要更新的组件。
   • 状态更新时，不会触发未使用状态的组件重新渲染。
3. 灵活：
   • 支持同步和异步状态更新。
   • 支持多状态库共存，可轻松集成到现有项目中。
4. React 生态兼容：
   • Zustand 的状态管理方式与 React 的 Hook 思想一致，容易上手。

Zustand 的高级功能

Zustand 支持中间件，可以用来扩展 Store 的功能，比如日志记录、持久化状态等。

使用 devtools 和 persist 中间件

persis: 可以将状态持久化到浏览器存储。

devtools: 打开你的浏览器 Redux DevTools Extension，交互后，在 Redux DevTools 界面中，可以看的action、state

1. 中间件（Middleware）： Zustand 提供中间件支持，常见的有持久化和开发工具支持。

   import create from 'zustand';
   import { devtools, persist } from 'zustand/middleware';const useStore = create(persist( // 通过 zustand/middleware 的 persist，可以将状态持久化到浏览器存储。(set) => ({count: 0,increment: () => set((state) => ({ count: state.count + 1 })),}),{name: 'counter-storage', // 存储的 keygetStorage: () => localStorage, // 使用 localStorage})
   );
   

2. 选择器优化： Zustand 支持按需订阅，避免不必要的渲染：

   const count = useStore((state) => state.count); // 只订阅 count// 从 Store 中提取状态和方法
   const count = useCounterStore((state) => state.count);
   const increment = useCounterStore((state) => state.increment)
   

3. 异步操作： 支持在状态逻辑中使用异步函数：

   const useStore = create((set) => ({data: null,fetchData: async () => {const response = await fetch('https://api.example.com/data');const data = await response.json();set({ data });},
   }));