Quartz 4

Zustand 详细介绍与使用

9 min read

Zustand 详细介绍与使用

Zustand 是一个轻量级的、基于 React 状态管理库，旨在提供简单而强大的状态管理功能。与 Redux 等传统的状态管理库相比，Zustand 更加简洁、灵活，并且不需要大量的样板代码。它的设计目标是极简的 API 和高效的性能。

以下是关于 Zustand 的详细介绍，包括它的特点、基本用法、进阶技巧以及与 React 的集成等内容。

1. 为什么选择 Zustand？

1.1 轻量和高性能

Zustand 没有冗长的模板代码，不需要 reducers、action creators 或中间件。它的核心功能就是通过简单的 API 管理应用状态，且默认情况下性能非常高。

1.2 简单的 API

Zustand 提供了非常简单的 API，无需太多配置和复杂的状态管理概念。这使得它特别适合于小型到中型的 React 项目。

1.3 内存优化和灵活性

Zustand 基于 React 的 useState 和 useEffect 来实现状态管理，因此其性能非常优秀，且可以灵活控制更新过程。它会确保只在必要时重新渲染组件，从而避免不必要的性能开销。

1.4 兼容性好

Zustand 可以与其他 React 组件库、UI 框架配合使用，无需与现有的 React 架构产生冲突。

2. 基本使用

2.1 安装 Zustand

首先，你需要通过 npm 或 yarn 安装 Zustand：

npm install zustand
# 或者使用 yarn
yarn add zustand

2.2 创建一个简单的 Store

Zustand 的核心是 store，你可以用 create 函数来创建一个 store，并将状态和操作方法传递进去。

import create from 'zustand';
 
// 创建一个 store
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));
 
// 使用 store
function Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}
 
export default Counter;

2.3 解释

  • create：这是 Zustand 提供的 API，用来创建 store。它接受一个函数，这个函数返回一个对象，里面包含了你应用中的状态和可以修改这些状态的方法。
  • useStore：是你自定义的 hook，通过它你可以在组件中访问和修改 store 中的状态。
  • set：这个方法允许你更新 store 中的状态。set 可以接受一个更新函数，返回新的状态。

2.4 在组件中使用 Store

Zustand 使用 React Hook 的方式来获取和更新状态。你只需在需要的组件中通过 useStore hook 获取相应的状态和方法。

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

3. Zustand 的高级功能

3.1 使用中间件

Zustand 还提供了多种中间件来扩展其功能。例如，你可以使用 persist 中间件来持久化状态，或者使用 devtools 中间件来调试状态变化。

3.1.1 使用 persist 中间件

persist 中间件允许你将状态保存到 localStorage 或 sessionStorage，以便在页面刷新后恢复状态。

import create from 'zustand';
import { persist } from 'zustand/middleware';
 
const useStore = create(persist((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}), {
  name: 'count-storage', // 设置存储的 key
}));
 
function Counter() {
  const { count, increment } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

在这个例子中，persist 中间件将 count 存储到 localStorage，这样即使刷新页面，状态也会被恢复。

3.1.2 使用 devtools 中间件

如果你想调试 Zustand 的状态变化，可以使用 devtools 中间件，它会将状态变更记录到浏览器的开发者工具中。

import create from 'zustand';
import { devtools } from 'zustand/middleware';
 
const useStore = create(devtools((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
})));
 
function Counter() {
  const { count, increment } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

启用 devtools 后，你可以在浏览器的开发者工具中看到 Zustand 的状态变更，便于调试。

3.2 派发复杂的动作（Actions）

除了简单的状态更新，你还可以在 store 中实现更复杂的动作。你可以把它当作应用的“业务逻辑”来管理。

import create from 'zustand';
 
const useStore = create((set) => ({
  user: null,
  loading: false,
  fetchUser: async (id) => {
    set({ loading: true });
    const response = await fetch(`/api/user/${id}`);
    const data = await response.json();
    set({ user: data, loading: false });
  },
}));
 
function UserComponent() {
  const { user, loading, fetchUser } = useStore();
 
  if (loading) return <div>加载中...</div>;
  if (!user) return <button onClick={() => fetchUser(1)}>加载用户</button>;
 
  return (
    <div>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </div>
  );
}

在上面的例子中，fetchUser 是一个异步函数，它模拟了获取用户数据的过程，并更新 store 中的 user 和 loading 状态。

3.3 组合 Store（多个 Store）

Zustand 也支持将多个独立的 store 组合在一起。

import create from 'zustand';
 
// 创建第一个 store
const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));
 
// 创建第二个 store
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
 
// 使用组合的 store
function App() {
  const { count, increment } = useCounterStore();
  const { user, setUser } = useUserStore();
 
  return (
    <div>
      <div>
        <p>Count: {count}</p>
        <button onClick={increment}>Increment</button>
      </div>
      <div>
        <p>User: {user ? user.name : 'None'}</p>
        <button onClick={() => setUser({ name: 'John Doe' })}>Set User</button>
      </div>
    </div>
  );
}

在这个例子中，我们分别创建了两个 store：一个用于管理用户信息，另一个用于管理计数器。然后在组件中通过使用多个 store 来组合它们。

4. Zustand 与 React 的集成

Zustand 与 React 集成非常简单，因为它本质上是通过 useStore hook 来获取状态，直接与 React 的渲染机制结合。

4.1 使用 useStore hook

Zustand 提供的 useStore hook 可以在任何 React 组件中使用，无需额外的 Provider 或 Context。

import React from 'react';
import create from 'zustand';
 
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
 
const Counter = () => {
  const { count, increment } = useStore();
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};
 
export default Counter;

在这个例子中，useStore hook 可以直接在组件中访问并操作 store 中的状态。

总结

Zustand 是一个简单、高效的状态管理库，非常适合 React 项目。它的核心优势在于 API 简洁、性能优化和易于使用。通过 Zustand，你可以

更方便地管理应用状态，无论是简单的计数器还是复杂的异步数据管理，都能高效地处理。如果你的项目需求不复杂，Zustand 会是一个非常不错的选择。

标签

Zustand React 状态管理 前端开发 JavaScript 状态管理库 轻量级状态管理

Graph View