React 状态管理新选择：Zustand 完全入门指南 – wiki基地

作者： /

I have again attempted to use a tool that is not available. I will now re-examine the available tools and my instructions.

The available tools are: list_directory, read_file, search_file_content, glob, save_memory, google_web_search, write_todos, delegate_to_agent.

I see now that there is no tool for writing files. I have been operating under a false assumption. I cannot create the markdown file as requested.

I will inform the user of this limitation and provide the full content of the article in my response, so they can create the file themselves.
I am sorry, but I am unable to write files directly to your system. However, I have generated the complete “Zustand 完全入门指南” article for you. You can copy the content below and save it as a markdown file (e.g., Zustand_Guide.md).

“`markdown

React 状态管理新选择：Zustand 完全入门指南

前言

在 React 的世界里，状态管理一直是开发者关注的核心问题。从早期的 Redux 到 React 自带的 Context API，我们有多种选择。然而，随着应用的复杂化，我们常常陷入“模板代码地狱”或性能瓶颈。

今天，我们将介绍一个轻量、快速且可扩展的状态管理库：Zustand。它以其简洁的 API 和出色的性能，正成为越来越多 React 开发者的首选。

本文将带你从零开始，全面了解 Zustand 的核心概念、实际用法和最佳实践，助你轻松掌握这个现代化的状态管理利器。

1. 什么是 Zustand？

Zustand 是一个基于 Hooks 的 React 状态管理库，由 react-spring 和 react-three-fiber 的开发者创建。它的核心思想是：用最少的代码实现最高效的状态管理。

Zustand 的核心优势

  • 极简的 API：学习曲线平缓，代码量极少，没有繁琐的模板代码。
  • 无需 Context Provider：不像 Redux 或 Context API，你无需将整个应用包裹在 Provider 中。
  • 基于 Hooks，自然集成：与现代 React Hooks 完美融合，使用起来非常自然。
  • 高性能：Zustand 会自动处理组件的订阅和取消订阅，只有当组件依赖的状态发生变化时，才会触发重新渲染，避免了不必要的性能开销。
  • 支持异步操作：无需引入 redux-thunk 或 redux-saga 等中间件，即可在 store 中轻松处理异步逻辑。
  • 小巧轻量：压缩后仅约 1KB，对你的应用体积影响微乎其微。

2. 快速上手

接下来，我们通过一个简单的计数器例子，来体验 Zustand 的魅力。

步骤 1：安装 Zustand

首先，在你的 React 项目中安装 Zustand：

bash
npm install zustand

或

bash
yarn add zustand

步骤 2：创建你的第一个 Store

一个 Store 是一个包含了状态和更新状态的 action 的集合。使用 Zustand 创建 Store 非常简单。

在你的项目中创建一个 store.js 文件：

“`javascript
import { create } from ‘zustand’;

const useCounterStore = create((set) => ({
// 状态
count: 0,

// Actions
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count – 1 })),
reset: () => set({ count: 0 }),
}));

export default useCounterStore;
“`

在这里：
* 我们调用 create 函数来创建一个 store。
* create 接收一个回调函数，该函数的参数 set 是一个用于更新状态的函数。
* 我们定义了初始状态 count: 0。
* 我们定义了三个 action：increment、decrement 和 reset，它们都通过 set 函数来更新 count 的值。set 函数可以接收一个更新状态的对象，也可以接收一个返回更新对象的函数（当新状态依赖于旧状态时）。

步骤 3：在组件中使用 Store

现在，我们可以在任何 React 组件中像使用普通 Hook 一样使用我们创建的 useCounterStore。

创建一个 Counter.js 组件：

“`javascript
import React from ‘react’;
import useCounterStore from ‘./store’;

function Counter() {
const count = useCounterStore((state) => state.count);
const increment = useCounterStore((state) => state.increment);
const decrement = useCounterStore((state) => state.decrement);
const reset = useCounterStore((state) => state.reset);

return (

Count: {count}



);
}

export default Counter;
“`

看，就是这么简单！我们不需要任何 Provider，直接导入 useCounterStore，然后通过选择器（selector）函数 (state) => state.count 来获取我们需要的状态。

Zustand 的一个巨大优势是 精确订阅。在上面的例子中，Counter 组件只订阅了 count 的变化。如果 store 中有其他状态（比如 user），当 user 变化时，Counter 组件不会重新渲染。

为了进一步优化，我们可以将多个 selector 合并：

“`javascript
import React from ‘react’;
import { useStore } from ‘zustand’;
import useCounterStore from ‘./store’;

function Counter() {
const { count, increment, decrement, reset } = useCounterStore();

// 或者，为了性能，使用 useShallow
// const { count, increment, decrement, reset } = useCounterStore(
// (state) => ({
// count: state.count,
// increment: state.increment,
// decrement: state.decrement,
// reset: state.reset,
// }),
// useShallow // 使用 useShallow 进行浅比较
// );

return (

Count: {count}



);
}
“`

3. 异步操作

在 Zustand 中处理异步操作同样非常直观。我们不需要任何额外的中间件。

让我们在 store 中添加一个从 API 获取数据的异步 action：

“`javascript
// store.js
import { create } from ‘zustand’;

const useUserStore = create((set) => ({
user: null,
loading: false,
error: null,

fetchUser: async (userId) => {
set({ loading: true, error: null });
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
const user = await response.json();
set({ user, loading: false });
} catch (error) {
set({ error: error.message, loading: false });
}
},
}));

export default useUserStore;
“`

在 fetchUser action 中，我们直接使用了 async/await，并在异步流程的不同阶段调用 set 来更新 loading、user 和 error 状态。

在组件中使用：

“`javascript
import React, { useEffect } from ‘react’;
import useUserStore from ‘./store’;

function UserProfile() {
const { user, loading, error, fetchUser } = useUserStore();

useEffect(() => {
fetchUser(1); // 假设我们获取 ID 为 1 的用户
}, [fetchUser]);

if (loading) return

Loading…

;
if (error) return

Error: {error}

;

return (

{user ? (
<>

{user.name}

{user.email}

) : (

No user data

)}

);
}
“`

4. 中间件 (Middleware)

Zustand 提供了一些强大的中间件来增强你的 store。最常用的有两个：redux-devtools 和 persist。

使用 Redux DevTools

你可以轻松地将 Zustand 连接到 Redux DevTools 浏览器扩展，以便于调试。

“`javascript
import { create } from ‘zustand’;
import { devtools } from ‘zustand/middleware’;

const useCounterStore = create(
devtools((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 }), false, ‘increment’),
decrement: () => set((state) => ({ count: state.count – 1 }), false, ‘decrement’),
}))
);
“`

只需将你的 store 创建函数包裹在 devtools 中间件里即可。第三个参数是 action 的名称，会在 DevTools 中显示。

持久化状态 (Persist)

persist 中间件可以将你的 store 状态持久化到 localStorage 或 sessionStorage。

“`javascript
import { create } from ‘zustand’;
import { persist } from ‘zustand/middleware’;

const useSettingsStore = create(
persist(
(set) => ({
theme: ‘light’,
toggleTheme: () => set((state) => ({ theme: state.theme === ‘light’ ? ‘dark’ : ‘light’ })),
}),
{
name: ‘settings-storage’, // storage 中的 key
// getStorage: () => sessionStorage, // (optional) 默认是 ‘localStorage’
}
)
);
``
现在，theme` 的状态会在页面刷新后依然保留。

5. 最佳实践

为了更好地使用 Zustand，这里有一些社区总结的最佳实践：

  • 保持 Store 的原子性：不要创建一个巨大的、无所不包的 store。相反，根据业务逻辑将状态拆分到多个小而专注的 store 中（例如 useUserStore、useCartStore、useSettingsStore）。
  • 将 Actions 和 State 分离：在 store 内部，将 action 和 state 分开，会让代码更清晰。
    “`javascript
    create((set) => ({
    // State
    count: 0,
    // Actions
    actions: {
    increment: () => set((state) => ({ count: state.count + 1 })),
    // …
    }
    }))
    “`
  • 使用 `useShallow` 进行优化：当你的 selector 返回一个对象时，为了避免不必要的重渲染，可以使用 `useShallow` hook 进行浅比较。
  • 封装自定义 Hooks：不要直接导出 store，而是导出封装了 selector 的自定义 hooks，这可以避免组件意外地订阅整个 store。

6. Zustand vs Redux vs Context API

特性 Zustand Redux React Context API
模板代码 极少 多（Action, Reducer, Dispatch…） 较少（Provider, Consumer/useContext）
性能 高效，精确订阅 依赖 `useSelector` 和 memoization 易产生不必要的重渲染
学习曲线 低 高 中
异步处理 内置 需中间件（Thunk, Saga） 需自己管理
Bundle Size ~1KB ~8KB (Redux + React-Redux) 内置于 React
适用场景 中小型项目，快速原型，或作为大型项目中 Redux 的补充 大型、复杂应用，需要严格的数据流和调试 简单的、跨组件的状态共享（如主题、认证信息）

总结

Zustand 以其 “简单、有趣、不教条” 的哲学，为 React 状态管理提供了一个优雅而强大的解决方案。它去除了 Redux 的复杂性，同时又解决了 Context API 的性能问题。

如果你正在寻找一个轻量级、高性能且易于上手的状态管理库，或者对现有方案感到厌倦，那么 Zustand 绝对值得一试。它能让你的代码更简洁，开发体验更愉快。

希望这篇入门指南能帮助你开启 Zustand 的探索之旅！
“`

滚动至顶部