说实话，Zustand 是我Zui近在项目中爱上的一个状态管理库，哈哈，它用起来简直不要太爽！

Zustand是一个轻量、快速、无模板的 React 状态管理库.import{ create }from'zustand'//例如定义熊bearconstuseBearStore =create = = set = ),decrease: = set = ),reset:....

你可Neng会发现，useBear用起来和普通 React Hook 几乎没区别 —— 这正是 Zustand 深受新手青睐的核心原因：无需复杂配置，不用嵌套 Provider，像使用普通 Hook 一样就Neng轻松管理全局状态。

与一些臃肿的状态管理库不同,Zustand既不会强制你编写大量样板代码,也不会强加过多的设计约束,但它仍然保持了Flux架构的核心思想,使得状态管理逻辑清晰明确。

咱就是说它简化了 Redux 中的复杂流程,提供了geng简洁、geng直观的状态管理方式,是目前 React 社区中Zui受欢迎的状态管理工具之一。

.import { create } from 'zustand' const useStore = create = = set = ), removeAllBears: = set, updateBears: = set....

害，你要是还在为 Redux 繁琐的流程头疼，试试 Zustand 吧，保证让你眼前一亮！

前置说明：以下示例基于 TypeScript 编写，类型约束让状态管理geng规范。

Zustand:232:一个小巧、快速且可 的极简状态管理解决方案。Zustand 提供了一个基于 Hooks 的舒适 API,它不啰嗦、不强加架构约束,但有足够的约定性,使其语义明确,风格类似 Flux。

import { create } from 'zustand'// 定义状态类型，让状态结构geng清晰export interface BearState { bears: number increase: => void decrease: => void reset: => void}// 创建并导出自定义Hook，管理全局状态export const useBear = create<BearState> => => set => ), decrease: => set => ), reset: => set,}))export default useBear 步骤 ：在组件中使用 Store

import { Button } from "@/components/ui/button";import { useBear, type BearState } from "@/stores/index";export default function Demo {const bear: BearState = useBear;return => bear.increase}>增加计数</Button><Button size="lg"className="w-full max-w-md h- text-xl text-center btn btn-primary"onClick={ => bear.decrease}>减少计数</Button><Button size="lg"className="w-full max-w-md h- text-xl text-center btn btn-primary"onClick={ => bear.reset}>重置计数</Button></div></div>);}

为啥我的文章就是没收录啊？是不是标题不够吸引人？ 有时候不是标题的问题，而是你的内容质量和搜索引擎优化没Zuo好哦~ 说不定是你的外链建设或者关键词布局需要优化下呢！你懂的！

根据你使用的包管理器，执行对应命令即可完成安装：

npm install zustand # npm 包管理器 pnpm add zustand # pnpm 包管理器 yarn add zustand # yarn 包管理器

点击按钮即可kan到计数实时变化。

基本的状态管理搞定后你可Neng想进一步了解它的持久化Neng力——比如数据存到 localStorage 里。

.import { persist } from 'zustand /middleware'; const useStore = create = , { name : 'storage-key', // 存储的key getStorage : = localStorage, // 存储引擎,默认是localStorage } ) ) ;.

状态 管理一直是个绕不开的话题 . 你Ke以用它搭配 React Query Zuo数据同步，或者在复杂应用中结合 Immer 处理不可变数据 —— 玩法有hen多！

下一期咱们来聊聊 Zustand 的异步处理和中间件机制，你想了解哪些高级用法呢？欢迎留言讨论～