Zustand 实战：10 行代码搞定全局状态

niusir2025-09-26 19:13

Zustand 实战：10 行代码搞定全局状态

在 React 状态管理的世界里，Redux 和 Context 一直是常见的选择。但很多时候我们只是需要一个轻量、简单的全局状态管理工具。这时候 Zustand 就是一个很好的选择：API 简洁，代码量极少，学习成本极低。

本文将用不到 10 行代码演示如何在 React 应用里快速接入 Zustand。

一、安装

复制代码

npm install zustand

或

csharp 复制代码

yarn add zustand

二、创建全局状态

使用 create 函数定义 store：

javascript 复制代码

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

count 是一个全局状态。
increase 是修改状态的方法。

三、在组件中使用

javascript 复制代码

function Counter() {
  const { count, increase } = useStore();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>+1</button>
    </div>
  );
}

任何使用 useStore 的组件，都会在 count 改变时自动更新，而无需手动传递 props。

四、对比 Redux / Context

特性	Redux Toolkit	Context API	Zustand
学习曲线	中等	低	极低
模板代码	较多	较少	极少
状态共享	✅	✅	✅
调试工具	✅	❌	✅（支持）

可以看到，Zustand 用最小的心智负担，提供了类似 Redux 的全局状态体验。

五、总结

Zustand 轻量、灵活，10 行代码即可实现全局状态管理。
对于小型和中型应用，它是 Redux 和 Context 的极佳替代方案。
如果你觉得 Redux 模板代码繁琐，不妨试试 Zustand。