0 基础入门 Zustand：新手友好的 React 状态管理方案

一、开篇：为什么新手首选 Zustand？

对于 React 开发者而言，你是否早已受够了useState和useContext的痛点？中大型项目里状态散落各处、难以维护，有没有像 Vue 的 Pinia 一样轻便好用的状态管理库？答案是肯定的 ------ 今天要介绍的 Zustand，就是这样一款适配 React 的优秀选择。

Zustand 核心介绍

Zustand 是一款轻量、高性能且可扩展的极简状态管理工具。它基于 Hooks 设计了简洁易用的 API，既不繁琐、也不强制绑定复杂规范，同时又遵循 Flux 设计思想，兼顾清晰性与实用性，上手门槛极低。

Zustand 与其他状态管理方案对比

表格

方案	核心特点	性能	学习成本	适用场景
Zustand	无 Provider 嵌套、精准状态订阅、极简 API	极高	极低	中小项目、全局状态管理、性能敏感场景
Redux Toolkit	规范严格、生态成熟、单向数据流清晰	中等（需手动优化）	较高	大型项目、强协作团队场景
Context + useReducer	React 内置、无额外依赖	较低（状态变更触发全量渲染）	中等	小型项目、局部状态管理

二、快速安装：一行命令搞定环境

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

bash 复制代码

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

三、核心基础：从 0 到 1 编写第一个 Store

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

步骤 1：创建 Store 文件（src/stores/index.ts）

tsx 复制代码

import { create } from 'zustand'

// 定义状态类型，让状态结构更清晰
export interface BearState {
  bears: number
  increase: () => void
  decrease: () => void
  reset: () => void
}

// 创建并导出自定义Hook，管理全局状态
export const useBear = create<BearState>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  decrease: () => set((state) => ({ bears: state.bears - 1 })),
  reset: () => set({ bears: 0 }),
}))

export default useBear

步骤 2：在组件中使用 Store（src/components/demo.tsx）

tsx 复制代码

import { Button } from "@/components/ui/button";
import { useBear, type BearState } from "@/stores/index";

export default function Demo() {
  // 像使用普通Hook一样，获取状态和方法
  const bear: BearState = useBear();
  
  return (
    <div className="container mx-auto mt-20">
      <h1 className="text-5xl font-bold mt-10">当前计数：{bear.bears}</h1>
      <div className="flex flex-col justify-center items-center gap-5 mt-10">
        <Button 
          size="lg"
          className="w-full max-w-md h-16 text-xl text-center btn btn-primary" 
          onClick={() => bear.increase()}
        >
          增加计数
        </Button>
        <Button 
          size="lg"
          className="w-full max-w-md h-16 text-xl text-center btn btn-primary" 
          onClick={() => bear.decrease()}
        >
          减少计数
        </Button>
        <Button 
          size="lg"
          className="w-full max-w-md h-16 text-xl text-center btn btn-primary" 
          onClick={() => bear.reset()}
        >
          重置计数
        </Button> 
      </div>
    </div>
  );
}

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

你可能会发现，useBear用起来和普通 React Hook 几乎没区别 ------ 这正是 Zustand 深受新手青睐的核心原因：无需复杂配置，不用嵌套 Provider，像使用普通 Hook 一样就能轻松管理全局状态。到这里我相信你已经了解如何使用zustand进行状态管理了，下一期我们将深入探索zustand的奥秘