Zustand 快速上手：从安装到实战状态管理

1. Zustand 是什么为什么选择它如果你正在使用 React 开发应用状态管理可能是你经常需要面对的问题。Zustand 是一个轻量级的状态管理库它的名字来源于德语单词状态。相比 Redux 这样的老牌状态管理工具Zustand 提供了更简单、更直观的 API让开发者能够快速上手。我第一次接触 Zustand 是在一个电商项目中当时我们需要在多个组件间共享购物车总金额。最初我们尝试用 React 的 Context API但随着组件层级越来越深代码变得难以维护。后来改用 Zustand整个状态管理逻辑立刻清晰了很多。Zustand 有几个显著优势体积小巧核心代码只有约 1kb不会增加你的打包体积API 简单不需要像 Redux 那样定义 action、reducer直接创建 store 就能用无 Provider 包裹不需要用 Provider 包裹你的应用组件树类型安全完美支持 TypeScript中间件支持可以通过中间件扩展功能比如持久化、日志等2. 安装与基础配置2.1 安装 Zustand安装 Zustand 非常简单只需要运行以下命令npm install zustand # 或者使用 yarn yarn add zustand如果你使用 TypeScript强烈推荐Zustand 已经内置了类型定义不需要额外安装类型包。2.2 创建第一个 Store让我们创建一个简单的计数器 store。在项目中新建一个store文件夹然后创建counter.ts文件import { create } from zustand interface CounterStore { count: number increment: () void decrement: () void reset: () void } const useCounterStore createCounterStore((set) ({ count: 0, increment: () set((state) ({ count: state.count 1 })), decrement: () set((state) ({ count: state.count - 1 })), reset: () set({ count: 0 }), })) export default useCounterStore这个 store 定义了一个计数器包含增加、减少和重置功能。create函数是 Zustand 的核心它接收一个函数作为参数这个函数会接收set和get方法分别用于更新和获取状态。3. 在组件中使用 Zustand3.1 基本用法在组件中使用 store 非常简单直接导入并使用即可import useCounterStore from ./store/counter function Counter() { const { count, increment, decrement, reset } useCounterStore() return ( div p当前计数: {count}/p button onClick{increment}增加/button button onClick{decrement}减少/button button onClick{reset}重置/button /div ) }你会发现这和使用 React 的useState非常相似但状态是全局共享的。任何使用这个 store 的组件都会自动订阅状态变化并在状态更新时重新渲染。3.2 选择性订阅状态有时候组件只需要 store 中的部分状态。为了避免不必要的重新渲染可以使用 selectorfunction CounterDisplay() { const count useCounterStore((state) state.count) return p当前计数: {count}/p }这样组件只会在count变化时重新渲染即使 store 中其他状态发生变化也不会影响这个组件。4. 实战全局金额管理让我们通过一个更实际的例子来展示 Zustand 的强大之处。假设我们正在开发一个电商应用需要在多个组件中共享和管理订单总金额。4.1 创建金额 Store在store文件夹下创建price.tsimport { create } from zustand interface PriceStore { total: number items: { id: string; name: string; price: number }[] addItem: (item: OmitPriceStore[items][0], id) void removeItem: (id: string) void clearCart: () void getTotal: () number } const usePriceStore createPriceStore((set, get) ({ total: 0, items: [], addItem: (item) set((state) ({ items: [...state.items, { ...item, id: Date.now().toString() }], total: state.total item.price, })), removeItem: (id) set((state) { const item state.items.find((i) i.id id) if (!item) return state return { items: state.items.filter((i) i.id ! id), total: state.total - item.price, } }), clearCart: () set({ items: [], total: 0 }), getTotal: () get().total, })) export default usePriceStore这个 store 管理了一个购物车可以添加商品、移除商品、清空购物车并自动计算总金额。4.2 在多个组件中使用现在我们可以在不同组件中使用这个 store商品列表组件function ProductList() { const addItem usePriceStore((state) state.addItem) const products [ { name: 商品A, price: 100 }, { name: 商品B, price: 200 }, { name: 商品C, price: 300 }, ] return ( div h3商品列表/h3 ul {products.map((product) ( li key{product.name} {product.name} - ¥{product.price} button onClick{() addItem(product)}加入购物车/button /li ))} /ul /div ) }购物车组件function ShoppingCart() { const { items, total, removeItem, clearCart } usePriceStore() return ( div h3购物车/h3 {items.length 0 ? ( p购物车为空/p ) : ( ul {items.map((item) ( li key{item.id} {item.name} - ¥{item.price} button onClick{() removeItem(item.id)}移除/button /li ))} /ul p总计: ¥{total}/p button onClick{clearCart}清空购物车/button / )} /div ) }总金额显示组件可能在顶部导航栏function CartSummary() { const total usePriceStore((state) state.total) return ( div span购物车总金额: ¥{total}/span /div ) }这三个组件共享同一个 store但只订阅它们需要的状态。当购物车状态变化时只有相关的组件会重新渲染。5. 高级技巧与最佳实践5.1 使用中间件Zustand 支持中间件可以扩展 store 的功能。比如添加持久化功能import { create } from zustand import { persist } from zustand/middleware const usePersistedStore create( persist( (set) ({ count: 0, increment: () set((state) ({ count: state.count 1 })), }), { name: count-storage, // localStorage 的 key } ) )这样 store 的状态会自动保存到 localStorage页面刷新后状态不会丢失。5.2 处理异步操作Zustand 可以很方便地处理异步操作interface UserStore { user: User | null loading: boolean error: string | null fetchUser: (id: string) Promisevoid } const useUserStore createUserStore((set) ({ user: null, loading: false, error: null, fetchUser: async (id) { set({ loading: true, error: null }) try { const response await fetch(/api/users/${id}) const user await response.json() set({ user, loading: false }) } catch (error) { set({ error: error.message, loading: false }) } }, }))5.3 性能优化对于复杂对象可以使用shallow比较来避免不必要的重新渲染import { shallow } from zustand/shallow function UserProfile() { const { user, fetchUser } useUserStore( (state) ({ user: state.user, fetchUser: state.fetchUser }), shallow ) // 组件代码 }这样只有当user或fetchUser的引用发生变化时组件才会重新渲染。