Zustand

小巧、快速且可扩展的轻量级状态管理解决方案

Zustand 是一个简单而高性能的 React 应用程序状态管理库。它具有最小的 API，易于学习，不需要样板代码。

开始使用查看文档

为什么选择 Zustand？

⚡

简单且最小化

无需 Provider，无需 Context，只需纯粹的 React Hooks。简单易用的 API。

🚀

快速且高性能

针对性能优化，自动渲染优化，最小化重新渲染。

📈

可扩展

适用于小型应用，也能轻松扩展到大型复杂应用。

🎯

TypeScript 优先

考虑到 TypeScript 构建，提供出色的类型推断和开发体验。

🔧

开发工具支持

集成 Redux DevTools，便于调试和状态检查。

🔌

灵活的中间件

通过中间件扩展功能，支持持久化、开发工具等。

快速开始

1

安装 Zustand

npm install zustand
2

创建一个 store

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))
3

在组件中使用 store

function Counter() {
  const { count, increment, decrement } = useStore()
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

准备好开始了吗？

探索我们全面的文档和教程来掌握 Zustand。

开始学习