【学习资料】React 状态管理神器 Zustand：轻松上手指南

1. 准备工作：安装 Zustand

首先，安装 Zustand，它的安装过程比你想象的要简单。

npm install zustand

2. 创建你的第一个状态 Store

Zustand 让我们以函数的方式创建状态存储。假设我们要管理一个简单的计数器，只需创建一个 store，然后通过 useStore Hook 来访问它。

代码示例：

import create from 'zustand';

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

解释：这里我们创建了一个 useCounterStore，包含 count 的状态，以及 increase 和 decrease 方法。通过 set 函数更新状态，Zustand 会自动更新组件。

3. 在组件中使用 Store

创建完 store 后，直接在组件中调用它并渲染状态。

代码示例：

import React from 'react';
import useCounterStore from './store';

const Counter = () => {
  const { count, increase, decrease } = useCounterStore();
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
};

export default Counter;

解释：通过解构 useCounterStore 中的 count 和 increase、decrease 方法，我们可以轻松在按钮点击时更新状态。

4. 拓展状态：添加多个 Store

Zustand 还允许我们创建多个 store，将不同的状态分开管理。比如，有一个用户状态存储 useUserStore。

代码示例：

const useUserStore = create((set) => ({
  user: { name: '小张', age: 25 },
  updateUser: (newUser) => set({ user: newUser }),
}));

然后，在组件中访问：

const { user, updateUser } = useUserStore();

这样我们就能灵活管理多个独立的 store，让代码更加清晰和模块化。

5. 中间件的使用：持久化和日志功能

Zustand 还支持中间件，比如持久化状态，或在控制台打印每次状态的变化。

代码示例：

import { persist, devtools } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'counter-storage', // 状态保存到 localStorage
    }
  )
);

解释：这里我们使用 persist 中间件，将状态保存在 localStorage 中，即使刷新页面也能保持数据。这让 Zustand 的适用范围更广。

6. 总结

Zustand 是一个轻量、简单、功能强大的状态管理工具。它没有过多复杂的配置，非常适合不需要复杂状态逻辑的项目。希望大家通过这些简单的案例，能够快速上手 Zustand，在自己的 React 项目中轻松实现高效的状态管理！