react Zustand 详细使用

下面给你一份React + Zustand 的系统性、从入门到进阶的使用指南，按实际项目节奏来讲，基本覆盖 90% 场景。一、Zustand 是什么 为什么用它Zustand是一个：✅ 极简（1KB）✅ 基于 Hook✅ 无需 Provider✅ TypeScript 友好✅ 可直接写异步逻辑的状态管理库，常用于：跨组件共享状态替代 Redux / MobX中小型 React / Next.js 项目二、安装npminstallzustand# 或pnpmaddzustand三、最基础用法（必会）1️⃣ 创建 Store// stores/counterStore.tsimport{create}from'zustand';typeCounterState={count:number;increment:()=void;decrement:()=void;reset:()=void;};exportconstuseCounterStore=createCounterState((set)=({count:0,increment:()=set((state)=({count:state.count+1})),decrement:()=set((state)=({count:state.count-1})),reset:()=set({count:0}),}));✅set用于修改状态✅ 不需要 action / dispatch2️⃣ 在组件中使用import { useCounterStore } from './stores/counterStore'; function Counter() { const count = useCounterStore((state) = state.count); const increment = useCount