在 React 环境中，很多开发者曾经抱怨：“为什么没有像 Vue Pinia 那样轻量、零样板代码的状态管理库？”常见痛点包括：

• Context 方案导致频繁渲染，性能堪忧。按理说，
• Redux 需要大量 boilerplate。学习成本高，
• 缺乏直观的 hooks 风格，使用不够自然。

下面给出一套 Zustand 的完整使用教程，方便你摆脱这些痛点。

一、基础使用

创建 store

// store/counterStore.ts
import { create } from 'zustand'
interface CounterState {
至于count，number
increment: => void
decrement: => void
说到reset，=> void
}
const useCounterStore = create => ({
至于count，0,increment: => set => ),decrement: => set => ),reset: => set,}))

组件中使用

// Counter.tsx
import useCounterStore from './store/counterStore'
const Counter = => {
const { count,increment。decrement } = useCounterStore
return (

+
-

)
}
// 同步兄弟组件
const Display = => {
const count = useCounterStore => state.count)
return 

Current count: {count}
}

二、进阶特性

异步操作

// store/userStore.ts
interface UserState {
从user来看，User | null
loading: boolean
fetchUser: => Promise
}
const useUserStore = create => ({
user这方面，null,loading: false,fetchUser: async => {
set
try {
const response = await fetch
const user = await response.json
set
} catch {
set
throw error
}
},}))

深层嵌套状态更新

// 使用 immer 简化嵌套更新
import { produce } from 'immer'
const useTodoStore = create<{
 todos?: Todo
 addTodo?: =>void
toggleTodo?: =>void }> | undefined> => ({
至于todos，addTodo:=>set),text。completed:false})}))
toggleTodo:=>set(produce(state=>{
const todo=state.todos.find
if{todo.completed=!todo.completed}
}))
}))

性能调整的观点是，选择性订阅

// ✅仅订阅需要的状态。避免不必要的重渲染
const TodoList = => {
const todos=useTodoStore
const addTodo=useTodoStore
return (

{todos.map }


)
}
const TodoItem==>{
const todo=useTodoStore)
const toggleTodo=useTodoStore
return =>toggleTodo}>    "+{todo?老实说，.text}"→"{/b}&rarr，)
}

中间件使用

至于持久化存储，

import { persist,createJSONStorage } from 'zustand/middleware'
const useAuthStore = create(persist(
=>({
再看token，null,user:null,login:=>{/*...*/},logout :=>set
}),{
从name来看，'auth-storage',storage:createJSONStorage=>localStorage),}
))
// 开发工具插件支持
import { devtools } from 'zustand/middleware'
const useMyStore=create(devtools(
=>,{ name:'MyStore' }
))

三、常用方法

拆分 store

store/
├── authStore.ts # 登录/鉴权相关
├── cartStore.ts # Shopping cart logic
├── uiStore.ts # UI 状态：主题、弹窗等
└── productStore.ts # 商品数据与缓存

完整 TypeScript 示例

// store/authStore.ts
interface User{ id:string,name:string,email:string }
interface AuthState{
user : User|null,isAunticated:boolean,login:=>Promise,logout:void。initialize:Promise
}
export const useAuthStore=create<AuthState>=>{
说到user，null,isAunticated:false,login : async=>{
const response=await fetch('/api/login',{
method这方面，'POST',body : JSON.stringify
})
const data:any=await response.json
set
},logout : =>{
localStorage.removeItem
set
},initialize : async=>{
const token=localStorage.getItem
if{
// 验证 token 并获取使用者信息
const currentUser=await fetchCurrentUser
set
}
},})

兼容类组件的方案

// withCounter HOC

import {useCounterStore} from './store/counter-store' const withCounter==>{ return props=>{ const store=require) return <Component {...props} store={store}/> } }

class LegacyComponent extends React.Component{ render{ const{store}=this.props return <div>{Count:${store.count}};} } export default withCounter;

四、对比其他方案 包大小 学习曲线 样板代码 性能 DevTools 支持 异步操作支持

从上述对比可以看到：

• Zustand 的优势：
  • 零样板代码，让你把精力聚焦业务逻辑。其实，
  • hooks 风格天然符合 React 最新推荐方式。
  • 内部已做最优选择性订阅，无需手工调整。
  • Mild size，可以放进任何项目。
  • Builtin devtools 中间件，一键连接 Redux DevTools 实时监控状态变化。按理说，
  • Migrating 使用者可直接把 Pinia 的组合式 API 翻译成 Zustand 的 `create` 函数。并保留已有逻辑结构，说起来，
• 何时选用 Redux Toolkit：
  • 项目规模非常大。需要严格类型化和可维护性强的模式时仍然是首选。Zustand 更偏向灵活与轻量，而 Redux 更注重规范与可预测性。Pinoz-Pinia 与 Redux 双管齐下也可以共存，在小型模块保持 Zustand。大型模块保持 Redux 或者完全改为 MobX/Recoil 等其他方案，根据团队经验和业务需求酌情选取即可。

  快速开始

  bash npm i zustand npm i zustand/middleware # 可选 npm i immer @types/immer # 如需深层更新

  提示如果你之前已经在使用 Context API 而且遇到频繁重渲染的问题。那就考虑将其中最常变动的数据迁移到 Zustand，这将是一次毫无成本又能立刻体验更好的改造。

特性	★Zustand ★	☆Redux Toolkit ☆	☇Context API ☇
~1KB ~8KB 内置 ~40KB 隐含依赖	~100KB RTK Query 加载后可变 ~80KB 单纯 Store 建立块	无外部依赖但可导致频繁重渲染
极低：单行 API，hooks 风格天然适配 React Hooks API。适合从 Vue Pinia 转移过来的同学。	中等：需要了解 RTK Query、configureReducer 等概念，写法稍显冗长。更适合大型公司级项目，	低：原生 API。但缺乏自动批处理和调整，容易出现性能瓶颈。
极少：无需 Reducer/Action 类型定义； 只编写单行 setter 即可。适合小型业务场景，不过，	中等多：需要 action + reducer + middleware 等完整架构。更易维护，但代码量大，	多：直接在每个子组件内部访问 Context；若业务复杂会导致 provider 层层嵌套或重复导入.
自动根据 selector 调整，只订阅所需片段；老实说，内部使用 shallow compare 实现最小重渲染。话说回来，建议结合 Immer 做不可变更新即可.	手动调整需用 memo/selector 等；RTK 提供查询缓存，可减少网络请求。但不涉及 UI 重渲染.	若不做细粒度订阅，会导致整个树级别重新渲染；仅通过 shallowCompare 可缓解，但仍难以满足大规模需求.
内置 devtools 中间件支持 Redux DevTools 的时间线与断点功能。无需额外配置即可实时检查状态变化及历史轨迹.