Zustand 生态详解 | 前端技术导航

核心特性

Zustand 的设计哲学和关键技术特性

简单易用

无Provider、无Context、无样板代码。直接创建store，使用hooks访问状态。

无样板简单Hooks

轻量级

核心库仅1KB，压缩后更小。无依赖，性能优异。

1KB轻量级无依赖

高性能

基于Proxy的状态管理，精确更新组件。避免不必要的重渲染。

Proxy精确更新高性能

可扩展

支持中间件、持久化、开发者工具等扩展。可自定义状态管理逻辑。

中间件持久化可扩展

生态系统

围绕 Zustand 构建的完整工具链

React集成

与React深度集成，支持Hooks API。可在任何React组件中使用。

useStoreReactHooks

持久化

zustand/middleware支持状态持久化。可存储到localStorage、sessionStorage等。

persistlocalStorage持久化

开发者工具

支持Redux DevTools。可查看状态变化、时间旅行调试。

Redux DevTools时间旅行调试

Immer集成

支持Immer，使用不可变更新语法。简化复杂状态更新。

immer不可变更新简化

TypeScript

完整的TypeScript支持。类型安全的状态定义和访问。

TypeScript类型安全类型推断

跨框架

不仅支持React，还支持Vue、Svelte等框架。通用状态管理方案。

VueSvelte通用

快速入门

# 安装Zustand
npm install zustand

# 创建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 })),
    reset: () => set({ count: 0 })
}));

# 在React中使用
import { useStore } from "./store";

function Counter() {
    const { count, increment, decrement, reset } = useStore();
    
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

# 选择性订阅
function Count() {
    const count = useStore((state) => state.count);
    return <h1>{count}</h1>;
}

配置示例

// 完整Store配置
import { create } from "zustand";
import { persist, devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

const useStore = create(
    devtools(
        persist(
            immer((set, get) => ({
                // 用户状态
                user: null,
                setUser: (user) => set({ user }),
                logout: () => set({ user: null }),
                
                // 主题状态
                theme: "light",
                toggleTheme: () =>
                    set((state) => {
                        state.theme = state.theme === "light" ? "dark" : "light";
                    }),
                
                // 待办事项
                todos: [],
                addTodo: (todo) =>
                    set((state) => {
                        state.todos.push(todo);
                    }),
                removeTodo: (id) =>
                    set((state) => {
                        state.todos = state.todos.filter((todo) => todo.id !== id);
                    }),
                
                // 异步操作
                fetchUsers: async () => {
                    set({ loading: true });
                    try {
                        const response = await fetch("/api/users");
                        const users = await response.json();
                        set({ users, loading: false });
                    } catch (error) {
                        set({ error, loading: false });
                    }
                }
            })),
            {
                name: "app-storage", // 存储键名
                partialize: (state) => ({ user: state.user, theme: state.theme }) // 部分持久化
            }
        ),
        { name: "AppStore" } // DevTools名称
    )
);

export default useStore;

学习资源

官方文档

全面的API参考、指南和示例。

zustand-demo.pmnd.rs →

Zustand GitHub

源代码仓库，可查看源码和参与贡献。

github.com/pmndrs/zustand →

Zustand示例

官方示例项目和模板。

Examples →

Zustand教程

社区维护的Zustand教程和指南。

Tutorials →

与其他状态管理库对比

vs Redux

Zustand更简单，学习成本低。Redux更规范，适合大型项目，生态更成熟。

简单学习成本规范性

vs Jotai

Zustand集中式状态管理。Jotai原子化状态管理，适合细粒度状态控制。

集中式原子化状态粒度

vs Recoil

Zustand更轻量，无依赖。Recoil功能更强大，但较重，适合复杂状态。

轻量级无依赖功能强大