🌟 前端状态管理新宠：Zustand —— 比 Redux 更轻、比 Context 更强！

Yira
8 阅读4分钟

🌟 前端状态管理新宠：Zustand —— 比 Redux 更轻、比 Context 更强！

如果说国家需要中央银行来统一管理货币，那么大型前端项目就需要一个“中央状态仓库”来统一管理数据流。

在 React 项目中，随着组件越来越多、交互越来越复杂，状态（State）就像散落在各地的金币——有的在 A 组件，有的在 B 组件，修改时互相影响，调试时一头雾水。

这时候，你就需要一个专业的状态管家。过去我们用 Redux，现在，更轻量、更简洁、更 Hooks 友好的 Zustand 正在成为新一代首选！

🔑 为什么需要状态管理？

想象你在开发一个待办事项（Todo）应用：

  • 用户登录后，头像要显示在顶部
  • 待办列表要实时更新
  • 计数器要记录完成任务数
  • 刷新页面后，数据不能丢失

如果每个组件都自己存一份状态：

  • 数据不一致（比如登录状态在 Header 显示已登录，但在 Sidebar 却是未登录）
  • 状态同步困难（删一个 Todo，要通知 3 个组件更新）
  • 页面刷新，所有状态清零 ❌

✅ 解决方案：把重要状态集中存到一个“全局仓库”里！

🧩 Zustand 是什么？

Zustand（德语“状态”）是一个极简、高效、基于 Hooks 的状态管理库。

它的核心思想就一句：

“用一个函数创建 store，所有组件通过 hook 订阅它。”

✨ 三大优势

表格

特性说明
超轻量仅 ～1KB，无依赖
无需 Provider不像 Redux 需要包裹 <Provider>
天然支持持久化刷新页面不丢数据（配合 persist 中间件）

🏗 实战：用 Zustand 构建你的“中央状态银行”

我们来看你提供的代码，拆解它是如何工作的。

💰 1. 计数器状态（Counter Store）

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterState>()(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
      reset: () => set({ count: 0 }),
    }),
    { name: 'counter' } // 存到 localStorage 的 key
  )
);
🔍 关键点解析：
  • create()：创建 store
  • set()：修改状态（类似 Redux 的 dispatch）
  • persist()：自动把 count 存到浏览器 localStorage，刷新不丢！
  • name: 'counter' → 数据存在 localStorage.counter 里

✅ 组件使用：

const { count, increment } = useCounterStore();

📝 2. 待办事项状态（Todo Store）

export const useTodoStore = create<TodoState>()(
  persist(
    (set) => ({
      todos: [],
      addTodo: (text) =>
        set((state) => ({
          todos: [...state.todos, { id: Date.now(), text, completed: false }]
        })),
      toggleTodo: (id) =>
        set((state) => ({
          todos: state.todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
          )
        })),
      removeTodo: (id) =>
        set((state) => ({
          todos: state.todos.filter(todo => todo.id !== id)
        })),
    }),
    { name: 'todos' }
  )
);
💡 设计亮点：
  • id: Date.now()：简单生成唯一 ID（生产环境建议用 uuid）
  • 所有操作都是不可变更新（Immutable），保证 React 能正确 re-render
  • 同样通过 persist 实现数据持久化

👤 3. 用户登录状态（User Store）

export const userStore = create<UserState>()(
  persist(
    (set) => ({
      isLoggin: false,
      user: null,
      login: ({ username }) => 
        set({ isLoggin: true, user: { username, id: Date.now() } }),
      logout: () => set({ isLoggin: false, user: null }),
    }),
    { name: 'user' }
  )
);

⚠️ 注意：真实项目中密码绝不应存前端！这里仅为演示。

🎯 在组件中使用：像呼吸一样自然

function App() {
  const { count, increment, decrement } = useCounterStore();
  const { todos, addTodo, toggleTodo } = useTodoStore();

  return (
    <div>
      <button onClick={increment}>Count: {count}</button>
      
      <input onChange={...} />
      <button onClick={() => addTodo(inputValue)}>Add</button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input 
              type="checkbox" 
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)} 
            />
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

✅ 神奇之处：

  • 没有 useContext
  • 没有 Provider 包裹
  • 没有 mapStateToProps
  • 直接 useXXXStore() 就能拿到状态和方法！

而且，只有用到的状态变化时，组件才会 re-render（Zustand 自动优化）！

🆚 Zustand vs Redux vs Context API

表格

特性Context APIReduxZustand
学习成本低高极低
代码量中多（action/reducer/store）极少
性能容易全量更新高效高效（按需更新）
持久化需手动实现需 middleware内置 persist
是否需要 Provider是是否！

💡 Zustand = Redux 的能力 + Hooks 的简洁 + Context 的自由

🛠 最佳实践建议

  1. 按功能拆分 store

    • useUserStore、useCartStore、useThemeStore
    • 避免一个巨型 store

  2. 敏感数据不要存前端

    • Token 可存，但密码、银行卡号绝对不行！

  3. 生产环境用更强的 ID 生成器

    • Date.now() 可能在高并发下重复 → 改用 nanoid 或 uuid

  4. 结合 TypeScript

    • 你的代码已经用了！👍 类型安全让团队协作更稳

🌈 结语：Zustand，小而美的状态革命

Zustand 没有复杂的概念，没有冗余的模板代码，它让你专注于业务逻辑，而不是状态管理本身。

“最好的工具，是让你感觉不到它存在的工具。”

如果你还在为 Redux 的样板代码头疼，或被 Context 的性能问题困扰，
是时候试试 Zustand 了！

avatar
文章
阅读
粉丝