Zustand：简单、快速且可扩展的 React 状态管理-js教程-PHP中文网

Zustand: Simple, Fast, and Scalable State Management for React

Zustand：小型、快速且可扩展的 React 状态管理解决方案

Zustand 是一个简约、快速且可扩展的 React 状态管理库。它旨在为状态管理提供简单、无样板的解决方案，重点关注性能和可扩展性。 Zustand 的工作原理是创建管理状态的存储并提供简单的挂钩来访问和更新状态。

该库的名称 Zustand 来自德语中的“状态”一词，它旨在使 React 中的状态处理既直观又强大。 Zustand 因其简单性和灵活性而脱颖而出，使其成为在 React 应用程序中管理本地和全局状态的绝佳选择。

1. Zustand是什么？

Zustand 是一个小型的、无主见的、反应式的 React 应用程序状态管理库。它提供了一个带有钩子的灵活存储，使您可以轻松访问和改变状态。 Zustand 不依赖于任何特定的架构，这意味着您可以使用它来全局或本地管理状态，而不会引入不必要的复杂性。

Zustand 的主要特点：

简约 API：Zustand 有一个简单的 API，只有很少的代码行。
无样板：与 Redux 不同，Zustand 不需要操作或减速器即可工作，并且不需要额外的设置。
基于存储：Zustand 使用存储来管理应用程序状态，使其易于组织和扩展。
反应友好：Zustand 利用钩子和上下文 API 与 React 顺利集成。

2. Zustand的核心概念

1.商店

Zustand 中的

store 只是一个保存应用程序状态的对象。它可以使用 Zustand 提供的 create 函数来定义，并且可以包含操作状态的方法。

示例：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

登录后复制

useStore 钩子是使用 Zustand 的 create 函数创建的 store。状态存储在计数中，递增和递减等操作会修改状态。

2.访问状态

创建存储后，您可以在 React 组件中使用 useStore 钩子来读取和修改状态。

示例：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

登录后复制

useStore 挂钩使您可以访问商店中定义的状态和操作。您可以解构所需的状态和操作，并直接在组件中使用它们。

3.更新状态

要更新状态，您可以使用商店中提供的 set 方法。 set 方法采用一个获取当前状态并返回新状态的函数。 Zustand 自动触发使用已更改状态的组件的重新渲染。

示例：

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

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

登录后复制

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

3. Zustand的优点

1.简单又简约

Zustand 是轻量级的，并且有一个非常简单的 API，这使得在任何 React 应用程序中开始使用都非常容易。由于没有样板代码、reducer 或操作类型，它成为在 React 中管理状态的绝佳替代方案，并且没有 Redux 等其他库中的复杂性。

2.可扩展

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

3.性能优化

Zustand 使用 React 内置的钩子和上下文来高效地订阅状态更改并仅更新需要重新渲染的组件。即使在较大的应用程序中，这也能确保出色的性能。

4. TypeScript 支持

Zustand 具有出色的 TypeScript 支持，提供开箱即用的类型安全存储和挂钩。

5.无需提供者

与某些状态管理库不同，Zustand 不需要提供程序来包装您的应用程序。可以通过钩子直接访问状态，无需额外设置即可轻松使用。

6.灵活且不固执

Zustand 不强制执行任何模式或限制。您可以按照自己的喜好构建状态，并将 Zustand 用作本地存储或全局状态管理器。它为您提供了充分的灵活性，以最适合您的方式组织应用程序的状态。

4.将 Zustand 与 React 集成

将 Zustand 集成到 React 应用程序中非常简单。以下是在 React 应用程序中设置 Zustand 的分步指南：

第 1 步：安装 Zustand

要安装 Zustand，请运行以下命令：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

登录后复制

第 2 步：创建商店

创建一个存储您的应用程序状态和操作的商店。这是一个简单的专柜商店的示例：

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

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

登录后复制

第 3 步：在组件中使用 Store

现在您已经创建了商店，您可以使用 useStore 钩子访问 React 组件中的状态和操作。

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

登录后复制

在此示例中，useStore 用于访问当前计数以及修改计数的方法（递增和递减）。

第 4 步：在您的应用程序中使用该组件

最后，您可以在应用程序中渲染 Counter 组件。

npm install zustand

登录后复制

5. Zustand的高级功能

1.持续状态

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

示例：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

登录后复制

此中间件会将计数状态保存到 localStorage，以便即使在页面重新加载后也能保持状态。

2.合并多个商店

如果您想分离关注点或管理不同的状态部分，Zustand 允许您组合多个商店。

示例：

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

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

登录后复制