用途:在 React 项目中用 Zustand 5 管理全局状态,并遵循避免多余重渲染、合理拆分 Store 的实践。
主要能力与用法:
- 基础 Store:用 create<StoreType>() 定义状态与操作方法,组件内通过 useCounterStore() 取用。
- persist 中间件:从 zustand/middleware 引入 persist,配置 name 作为 localStorage 键,实现主题、语言等设置持久化。
- 选择器:只选取所需字段;多字段时从 zustand/react/shallow 引入 useShallow 包裹选择函数;避免直接取整个 Store,否则任意状态变化都会触发重渲染。
- 异步 Action:在 Store 内定义 async 方法,先 set 加载状态,再请求数据并更新,出错时写入 error。
- Slices 模式:将状态拆成 UserSlice、CartSlice 等,各自提供创建函数,最后用交叉类型组合进一个 Store。
- Immer 中间件:从 zustand/middleware/immer 引入 immer,允许在 set 内直接变更 state,如 push、修改字段。
- DevTools:从 zustand/middleware 引入 devtools,配置 name 显示在 Redux DevTools 中。
- React 之外:用 getState() 读取并调用方法,用 subscribe() 监听变化并返回取消订阅函数。
适用场景:React 应用中的计数器、用户信息、购物车、待办等状态管理。
限制:资料未提供安装方式、版本兼容要求、性能基准与收费信息。