Zustand：小型、快速且可擴展的 React 狀態(tài)管理解決方案

Zustand 是一個簡約、快速且可擴展的 React 狀態(tài)管理庫。它旨在為狀態(tài)管理提供簡單、無樣板的解決方案，重點關注性能和可擴展性。 Zustand 的工作原理是創(chuàng)建管理狀態(tài)的存儲并提供簡單的掛鉤來訪問和更新狀態(tài)。

該庫的名稱 Zustand 來自德語中的“狀態(tài)”一詞，它旨在使 React 中的狀態(tài)處理既直觀又強大。 Zustand 因其簡單性和靈活性而脫穎而出，使其成為在 React 應用程序中管理本地和全局狀態(tài)的絕佳選擇。

---

1. Zustand是什么？

Zustand 是一個小型的、無主見的、反應式的 React 應用程序狀態(tài)管理庫。它提供了一個帶有鉤子的靈活存儲，使您可以輕松訪問和改變狀態(tài)。 Zustand 不依賴于任何特定的架構，這意味著您可以使用它來全局或本地管理狀態(tài)，而不會引入不必要的復雜性。

Zustand 的主要特點：

• 簡約 API：Zustand 有一個簡單的 API，只有很少的代碼行。
• 無樣板：與 Redux 不同，Zustand 不需要操作或減速器即可工作，并且不需要額外的設置。
• 基于存儲：Zustand 使用存儲來管理應用程序狀態(tài)，使其易于組織和擴展。
• 反應友好：Zustand 利用鉤子和上下文 API 與 React 順利集成。

---

2. Zustand的核心概念

1.商店

Zustand 中的

store 只是一個保存應用程序狀態(tài)的對象。它可以使用 Zustand 提供的 create 函數(shù)來定義，并且可以包含操作狀態(tài)的方法。

示例：

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 函數(shù)創(chuàng)建的 store。狀態(tài)存儲在計數(shù)中，遞增和遞減等操作會修改狀態(tài)。

2.訪問狀態(tài)

創(chuàng)建存儲后，您可以在 React 組件中使用 useStore 鉤子來讀取和修改狀態(tài)。

示例：

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 掛鉤使您可以訪問商店中定義的狀態(tài)和操作。您可以解構所需的狀態(tài)和操作，并直接在組件中使用它們。

3.更新狀態(tài)

要更新狀態(tài)，您可以使用商店中提供的 set 方法。 set 方法采用一個獲取當前狀態(tài)并返回新狀態(tài)的函數(shù)。 Zustand 自動觸發(fā)使用已更改狀態(tài)的組件的重新渲染。

示例：

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函數(shù)通過增加當前值來更新計數(shù)狀態(tài)。

---

3. Zustand的優(yōu)點

1.簡單又簡約

Zustand 是輕量級的，并且有一個非常簡單的 API，這使得在任何 React 應用程序中開始使用都非常容易。由于沒有樣板代碼、reducer 或操作類型，它成為在 React 中管理狀態(tài)的絕佳替代方案，并且沒有 Redux 等其他庫中的復雜性。

2.可擴展

Zustand 可以輕松擴展以適應復雜的應用程序。它支持跨應用程序的本地狀態(tài)管理（針對各個組件）和全局狀態(tài)管理。 Zustand 旨在以最小的開銷處理大型、可擴展的應用程序。

3.性能優(yōu)化

Zustand 使用 React 內置的鉤子和上下文來高效地訂閱狀態(tài)更改并僅更新需要重新渲染的組件。即使在較大的應用程序中，這也能確保出色的性能。

4. TypeScript 支持

Zustand 具有出色的 TypeScript 支持，提供開箱即用的類型安全存儲和掛鉤。

5.無需提供者

與某些狀態(tài)管理庫不同，Zustand 不需要提供程序來包裝您的應用程序?？梢酝ㄟ^鉤子直接訪問狀態(tài)，無需額外設置即可輕松使用。

6.靈活且不固執(zhí)

Zustand 不強制執(zhí)行任何模式或限制。您可以按照自己的喜好構建狀態(tài)，并將 Zustand 用作本地存儲或全局狀態(tài)管理器。它為您提供了充分的靈活性，以最適合您的方式組織應用程序的狀態(tài)。

---

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 步：創(chuàng)建商店

創(chuàng)建一個存儲您的應用程序狀態(tài)和操作的商店。這是一個簡單的專柜商店的示例：

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

現(xiàn)在您已經創(chuàng)建了商店，您可以使用 useStore 鉤子訪問 React 組件中的狀態(tài)和操作。

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

• 在此示例中，useStore 用于訪問當前計數(shù)以及修改計數(shù)的方法（遞增和遞減）。

第 4 步：在您的應用程序中使用該組件

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

npm install zustand

---

5. Zustand的高級功能

1.持續(xù)狀態(tài)

Zustand 提供了一個中間件來將狀態(tài)持久化到 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;

• 此中間件會將計數(shù)狀態(tài)保存到 localStorage，以便即使在頁面重新加載后也能保持狀態(tài)。

2.合并多個商店

如果您想分離關注點或管理不同的狀態(tài)部分，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;

• 在這里，我們有兩個獨立的用戶和產品數(shù)據(jù)存儲。您可以在組件中獨立導入和使用它們。

---

6.結論

Zustand 提供了一個簡約、靈活且高性能的解決方案，用于管理 React 應用程序中的狀態(tài)。它的簡單性和可擴展性使其成為小型和大型 React 應用程序的絕佳選擇。通過使用鉤子和反應模式，Zustand 允許開發(fā)人員專注于構建他們的應用程序，而無需管理其他狀態(tài)管理庫的樣板。

無論您是構建小型應用程序還是大型應用程序，Zustand 都提供了一種輕量級、高效且可擴展的方式來管理 React 中的狀態(tài)。

---

以上是Zustand：簡單、快速且可擴展的 React 狀態(tài)管理的詳細內容。更多信息請關注PHP中文網其他相關文章！