Frontend Academy · 课时

使用 Zustand 管理轻量级 React 状态

使用 create() 创建 Zustand 仓库，通过 Hook 读取状态，使用操作更新状态，并享受无需样板代码的简洁 API。

使用 Zustand 管理轻量级 React 状态 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 Zustand？

Zustand 是一个精简、快速的 React 状态管理库。它的整个 API 非常小：创建一个 store，再使用钩子读取和更新它。无需归约器、操作或样板代码。

创建 store

create() 将状态和操作定义为一个普通对象。返回值是一个钩子。

import { create } from 'zustand';

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

export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

读取 store 状态

使用选择器函数调用该钩子，以订阅特定的状态片段。只有所选片段发生变化时，组件才会重新渲染。

function Counter() {
  const count = useCounterStore(state => state.count);
  return <p>Count: {count}</p>;
}

读取操作

以相同方式选择操作。操作不会变化，因此选择它们不会导致额外的重新渲染。

function Controls() {
  const { increment, decrement } = useCounterStore(
    state => ({ increment: state.increment, decrement: state.decrement })
  );
  return (
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

使用 set() 更新状态

set() 函数会以浅层方式合并更新（类似于 React 类组件中的 setState）。对于依赖之前状态的更新，请传入一个函数。

// Merge:
set({ loading: true });

// Function for dependent updates:
set(state => ({ count: state.count + 1 }));

// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);

异步操作

Zustand 中的操作可以是异步的——只需在等待异步操作完成后调用 set()。

export const useUsersStore = create<UsersStore>((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const users = await fetch('/api/users').then(r => r.json());
    set({ users, loading: false });
  }
}));

切片——组合大型 store

将大型 store 拆分为切片（独立的对象），再将它们组合起来。Zustand 的模式并不要求使用切片抽象，但这是组织大型 store 的清晰方式。

中间件：persist

persist 中间件会将 Zustand 状态保存到 localStorage，并在加载时恢复状态——设置过程非常简单。

import { persist } from 'zustand/middleware';

export const useSettingsStore = create<Settings>(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme })
    }),
    { name: 'app-settings' } // localStorage key
  )
);

中间件：devtools

通过 devtools 中间件为 Zustand 添加 Redux DevTools 支持。您可以获得完整的操作日志记录和时间旅行调试功能。

Zustand 与 Redux Toolkit

Zustand：精简、没有样板代码、设置快速，非常适合小型到中型 app。RTK：结构化、可扩展、DevTools 一流，更适合大型团队。两者都是可靠的选择——对于大多数 app，Zustand 的简洁性更胜一筹。

选择器与性能

始终只选择组件所需的最小状态片段。选择整个状态对象会导致 store 的任何变化都触发重新渲染。对于选择多个属性，请使用 zustand/shallow 中的 shallow。

import { shallow } from 'zustand/shallow';

const { theme, font } = useSettingsStore(
  state => ({ theme: state.theme, font: state.font }),
  shallow // compare each property shallowly
);

快速检查

如何创建一个整个 React app 都可以使用的 Zustand store？

总结：Zustand

create() 定义状态和操作。返回值是一个钩子。选择状态片段以避免不必要的重新渲染。set() 合并状态更新。异步操作在 await 之后调用 set()。使用 persist 中间件保存到 localStorage。使用 devtools 集成 Redux DevTools。无需 Provider。

常见问题解答

「使用 Zustand 管理轻量级 React 状态」课时是免费的吗？

是的 — 「使用 Zustand 管理轻量级 React 状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「使用 Zustand 管理轻量级 React 状态」这节课中我会学到什么？

使用 create() 创建 Zustand 仓库，通过 Hook 读取状态，使用操作更新状态，并享受无需样板代码的简洁 API。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 Zustand 管理轻量级 React 状态」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

Redux Toolkit：createSlice 与 configureStore
使用 Zustand 管理轻量级 React 状态
Pinia for Vue：defineStore 与 storeToRefs
何时使用全局状态与本地状态

← 返回 Frontend Academy