Zustand真香🧵！一、什么是 Zustand？ Zustand 是一个轻量级的状态管理库，使用非常简单，目标是提供

一、什么是 Zustand？

Zustand 是一个轻量级的状态管理库，使用非常简单，目标是提供一个无需复杂 API 和概念的全局状态管理解决方案。Zustand 使用了最小化的 API 来帮助开发者管理 React 应用中的状态。

Zustand 的特点包括：

简单易用：不需要 reducer、action 或复杂的概念。
高效：支持按需订阅状态，避免不必要的重渲染。
灵活：可以与 React、React Native 和其他框架一起使用。
无依赖：没有第三方依赖，体积小。

二、Zustand 的原理

Zustand 的核心概念是 store，它是一个包含应用状态的对象。Zustand 提供了一个函数 create 来创建这个 store。每当状态改变时，订阅这个 store 的组件会自动重新渲染。

1. 创建 Store

Zustand 使用 create 函数来创建一个 store，store 是一个 JavaScript 对象，包含了状态和修改这些状态的方法。下面是一个简单的例子：

import create from 'zustand';

// 创建一个 store
const useStore = create((set) => ({
  bears: 0, // 状态
  increase: () => set((state) => ({ bears: state.bears + 1 })), // 更新状态的方法
  decrease: () => set((state) => ({ bears: state.bears - 1 })),
}));

在这个例子中，我们创建了一个简单的 store，包含一个 bears 状态和两个修改该状态的方法：increase 和 decrease。

2. 使用 Store

一旦 store 被创建，你可以在 React 组件中通过 useStore hook 来访问和更新状态：

import React from 'react';
import { useStore } from './store';

const BearCounter = () => {
  const { bears, increase, decrease } = useStore(); // 使用 store 中的状态和方法

  return (
    <div>
      <h1>{bears} bears</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
};

export default BearCounter;

在这个例子中，useStore 返回了 bears 状态以及更新 bears 的 increase 和 decrease 方法。每当 increase 或 decrease 被调用时，状态会更新，并且 React 会自动重新渲染组件。

三、Zustand 的核心概念

Zustand 的设计非常简洁，核心概念有以下几个：

1. Store（状态仓库）

一个 store 保存了应用的状态。通过 create 函数，我们可以创建一个 store，它包含了所有的状态和修改这些状态的方法。

2. State（状态）

状态是应用中存储的数据。Zustand 允许你将这些状态组织在 store 中，而每个状态都可以通过设置和获取函数来进行访问。

3. set() 和 get()

Zustand 提供了 set 和 get 方法来更新和获取状态：

set：用于修改状态。调用 set 时，你可以传入一个修改状态的函数。
get：用于获取当前的状态。

4. 订阅

Zustand 会自动订阅所有使用该 store 的 React 组件。当状态更新时，所有订阅该状态的组件都会自动重新渲染。Zustand 只会在状态真正发生变化时触发组件的重渲染，从而确保了高效的性能。

5. Persist

Zustand 可以与本地存储（localStorage 或 sessionStorage）结合使用，实现状态的持久化。

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist(
  (set) => ({
    bears: 0,
    increase: () => set((state) => ({ bears: state.bears + 1 })),
  }),
  {
    name: 'bear-storage', // 持久化的存储名称
  }
));

在这个例子中，我们使用了 persist middleware 来将 bears 状态持久化到 localStorage 中。即使页面刷新，bears 的值也会被保存下来。

四、Zustand 的高级特性

除了基本的状态管理功能，Zustand 还支持一些高级特性，帮助开发者实现更复杂的需求。

1. 中间件

Zustand 允许使用中间件来扩展功能，例如：

persist：持久化状态到浏览器的 localStorage 或 sessionStorage。
devtools：与 Redux DevTools 集成，方便调试。
subscribeWithSelector：只订阅你需要的状态部分。

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

在这个例子中，devtools 中间件将 Zustand 与 Redux DevTools 集成，从而帮助你在开发时方便地调试应用的状态。

2. 自定义 Hooks

Zustand 允许你封装 store 和逻辑到自定义 hook 中。这样，你可以把状态管理逻辑从组件中提取出来，提高代码的复用性和可维护性。

// 定义一个自定义 hook
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

export { useCounterStore, useUserStore };

3. 异步操作

你可以在 store 中处理异步操作。通过在状态更新时执行异步函数，你可以方便地管理请求和加载状态。

const useStore = create((set) => ({
  data: null,
  loading: false,
  fetchData: async () => {
    set({ loading: true });
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    set({ data, loading: false });
  },
}));

在这个例子中，我们通过 fetchData 方法来获取数据，并管理加载状态。

五、Zustand 与 Redux 比较

虽然 Zustand 和 Redux 都是用于状态管理的库，但它们有一些显著的不同之处：

特性	Zustand	Redux
API 复杂性	简单，直接操作 store，轻量级	相对复杂，需要定义 actions, reducers, store
学习曲线	低，易于上手	较高，需要理解 actions, reducers 和 middleware
功能扩展	通过中间件扩展功能，灵活	通过中间件扩展功能，强大但有时复杂
调试	支持 Redux DevTools，较简单的调试	强大的调试工具，原生支持 DevTools

六、总结

Zustand 是一个轻量级、灵活且高效的状态管理库，它提供了一个简单的 API，使得 React 应用的状态管理变得更加轻松。与 Redux 相比，Zustand 更加简单易用，不需要复杂的配置和概念，适合中小型项目使用。如果你在寻找一个简单、高效的全局状态管理解决方案，Zustand 是一个非常不错的选择。