Zustand：简单、快速且可扩展的 React 状态管理

一分耕耘，一分收获！既然都打开这篇《Zustand：简单、快速且可扩展的 React 状态管理》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

Zustand：精简、高效的 React 状态管理方案

Zustand 是一款轻量级、高效且可扩展的 React 状态管理库。它提供了一种简洁、无冗余的解决方案，专注于性能和可扩展性。Zustand 的核心机制是创建用于管理状态的存储，并提供便捷的钩子函数来访问和更新状态。

库名 "Zustand" 来自德语单词 "状态"，旨在使 React 状态管理既直观又强大。Zustand 以其简洁性和灵活性著称，是管理 React 应用中本地和全局状态的理想选择。

1. Zustand 简介

Zustand 是一个小型、无侵入式、响应式的 React 状态管理库。它提供了一个带有钩子的灵活存储，方便访问和修改状态。Zustand 不依赖任何特定架构，这意味着它既可用于全局状态管理，也可用于本地组件状态管理，而不会增加不必要的复杂性。

Zustand 的主要特性：

• 简洁的 API: Zustand 拥有极其简洁的 API，代码量极少。
• 无冗余代码: 与 Redux 不同，Zustand 无需 Action 或 Reducer，配置也极其简单。
• 基于存储: Zustand 使用存储来管理应用状态，易于组织和扩展。
• 响应式: Zustand 利用钩子和 Context API 与 React 无缝集成。

2. Zustand 的核心概念

1. 存储 (Store)

Zustand 中的 Store 只是一个保存应用状态的对象。它通过 Zustand 提供的 create 函数定义，可以包含用于操作状态的方法。

示例：

import create from 'zustand';

const useStore = create((set) => ({
  计数: 0,
  递增: () => set((state) => ({ 计数: state.计数 + 1 })),
  递减: () => set((state) => ({ 计数: state.计数 - 1 })),
}));

• useStore 钩子通过 Zustand 的 create 函数创建 Store。状态存储在 计数 中，递增 和 递减 方法修改状态。

2. 访问状态

创建 Store 后，可在 React 组件中使用 useStore 钩子读取和修改状态。

示例：

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

const Counter = () => {
  const { 计数, 递增, 递减 } = useStore();

  return (
    <div>
      <p>计数: {计数}</p>
      <button onClick={递增}>递增</button>
      <button onClick={递减}>递减</button>
    </div>
  );
};

export default Counter;

• useStore 钩子允许访问 Store 中定义的状态和方法。可解构所需的状态和方法，直接在组件中使用。

3. 更新状态

更新状态，可以使用 Store 中提供的 set 方法。set 方法接收一个函数，该函数获取当前状态并返回新状态。Zustand 会自动触发使用更新后状态的组件重新渲染。

示例：

const useStore = create((set) => ({
  计数: 0,
  递增: () => set((state) => ({ 计数: state.计数 + 1 })),
}));

• 递增 方法使用 set 函数通过增加当前值来更新 计数 状态。

3. Zustand 的优势

1. 简洁易用

Zustand 轻量级，API 简洁，易于在任何 React 应用中上手。无需冗余代码、Reducer 或 Action 类型，是 Redux 等复杂库的绝佳替代方案。

2. 可扩展性

Zustand 易于扩展以适应复杂应用。它支持跨应用的本地状态管理（针对各个组件）和全局状态管理。Zustand 旨在以最小的开销处理大型、可扩展的应用。

3. 性能优化

Zustand 使用 React 内置的钩子和 Context API 高效订阅状态更改，仅更新需要重新渲染的组件。即使在大型应用中，也能保证出色的性能。

4. TypeScript 支持

Zustand 提供优秀的 TypeScript 支持，开箱即用地提供类型安全的 Store 和钩子。

5. 无需 Provider

不同于某些状态管理库，Zustand 不需要 Provider 包装应用。可直接通过钩子访问状态，无需额外配置即可轻松使用。

6. 灵活且无侵入性

Zustand 不强制任何模式或限制。可根据需要构建状态，将 Zustand 用作本地存储或全局状态管理器。它提供充分的灵活性，以最适合的方式组织应用状态。

4. Zustand 与 React 集成

将 Zustand 集成到 React 应用中非常简单。以下是分步指南：

步骤 1：安装 Zustand

运行以下命令安装 Zustand：

npm install zustand

步骤 2：创建 Store

创建一个 Store 来存储应用状态和方法。这是一个简单的计数器 Store 示例：

import create from 'zustand';

const useStore = create((set) => ({
  计数: 0,
  递增: () => set((state) => ({ 计数: state.计数 + 1 })),
  递减: () => set((state) => ({ 计数: state.计数 - 1 })),
}));

export default useStore;

步骤 3：在组件中使用 Store

创建 Store 后，可以使用 useStore 钩子在 React 组件中访问状态和方法。

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

// ... (Counter 组件代码，如上所示)

步骤 4：在应用中使用组件

最后，在应用中渲染 Counter 组件。

import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './Counter';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Counter />
  </React.StrictMode>
);

5. Zustand 的高级特性

1. 持久化状态

Zustand 提供中间件将状态持久化到 localStorage、sessionStorage 或其他存储机制中。

示例：

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

const useStore = create(
  persist(
    (set) => ({
      计数: 0,
      递增: () => set((state) => ({ 计数: state.计数 + 1 })),
      递减: () => set((state) => ({ 计数: state.计数 - 1 })),
    }),
    { name: 'counter' }
  )
);

• 此中间件将 计数 状态保存到 localStorage，即使页面刷新也能保持状态。

2. 组合多个 Store

如果需要分离关注点或管理不同的状态部分，Zustand 允许组合多个 Store。

示例：

import create from 'zustand';

// ... (用户 Store 和 产品 Store 代码)

• 这里有两个独立的用户和产品数据 Store。可在组件中独立导入和使用它们。

6. 结论

Zustand 提供了一个简洁、灵活且高性能的解决方案来管理 React 应用中的状态。其简洁性和可扩展性使其成为小型和大型 React 应用的理想选择。通过使用钩子和响应式模式，Zustand 允许开发者专注于构建应用，无需管理其他状态管理库的冗余代码。

无论构建小型应用还是大型应用，Zustand 都提供了一种轻量级、高效且可扩展的方式来管理 React 中的状态。

到这里，我们也就讲完了《Zustand：简单、快速且可扩展的 React 状态管理》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！