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

Zustand 是一個(gè)簡(jiǎn)約、快速且可擴(kuò)展的 React 狀態(tài)管理庫(kù)。它旨在為狀態(tài)管理提供簡(jiǎn)單、無(wú)樣板的解決方案，重點(diǎn)關(guān)注性能和可擴(kuò)展性。 Zustand 的工作原理是創(chuàng)建管理狀態(tài)的存儲(chǔ)并提供簡(jiǎn)單的掛鉤來(lái)訪問(wèn)和更新?tīng)顟B(tài)。

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

---

1. Zustand是什么？

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

Zustand 的主要特點(diǎn)：

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

---

2. Zustand的核心概念

1.商店

Zustand 中的

store 只是一個(gè)保存應(yīng)用程序狀態(tài)的對(duì)象。它可以使用 Zustand 提供的 create 函數(shù)來(lái)定義，并且可以包含操作狀態(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)存儲(chǔ)在計(jì)數(shù)中，遞增和遞減等操作會(huì)修改狀態(tài)。

2.訪問(wèn)狀態(tài)

創(chuàng)建存儲(chǔ)后，您可以在 React 組件中使用 useStore 鉤子來(lái)讀取和修改狀態(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 掛鉤使您可以訪問(wèn)商店中定義的狀態(tài)和操作。您可以解構(gòu)所需的狀態(tài)和操作，并直接在組件中使用它們。

3.更新?tīng)顟B(tài)

要更新?tīng)顟B(tài)，您可以使用商店中提供的 set 方法。 set 方法采用一個(gè)獲取當(dāng)前狀態(tài)并返回新?tīng)顟B(tài)的函數(shù)。 Zustand 自動(dòng)觸發(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ù)通過(guò)增加當(dāng)前值來(lái)更新計(jì)數(shù)狀態(tài)。

---

3. Zustand的優(yōu)點(diǎn)

1.簡(jiǎn)單又簡(jiǎn)約

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

2.可擴(kuò)展

Zustand 可以輕松擴(kuò)展以適應(yīng)復(fù)雜的應(yīng)用程序。它支持跨應(yīng)用程序的本地狀態(tài)管理（針對(duì)各個(gè)組件）和全局狀態(tài)管理。 Zustand 旨在以最小的開(kāi)銷(xiāo)處理大型、可擴(kuò)展的應(yīng)用程序。

3.性能優(yōu)化

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

4. TypeScript 支持

Zustand 具有出色的 TypeScript 支持，提供開(kāi)箱即用的類(lèi)型安全存儲(chǔ)和掛鉤。

5.無(wú)需提供者

與某些狀態(tài)管理庫(kù)不同，Zustand 不需要提供程序來(lái)包裝您的應(yīng)用程序?？梢酝ㄟ^(guò)鉤子直接訪問(wèn)狀態(tài)，無(wú)需額外設(shè)置即可輕松使用。

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

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

---

4.將 Zustand 與 React 集成

將 Zustand 集成到 React 應(yīng)用程序中非常簡(jiǎn)單。以下是在 React 應(yīng)用程序中設(shè)置 Zustand 的分步指南：

第 1 步：安裝 Zustand

要安裝 Zustand，請(qǐng)運(yùn)行以下命令：

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)建一個(gè)存儲(chǔ)您的應(yīng)用程序狀態(tài)和操作的商店。這是一個(gè)簡(jiǎn)單的專(zhuān)柜商店的示例：

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)在您已經(jīng)創(chuàng)建了商店，您可以使用 useStore 鉤子訪問(wèn) React 組件中的狀態(tài)和操作。

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

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

第 4 步：在您的應(yīng)用程序中使用該組件

最后，您可以在應(yīng)用程序中渲染 Counter 組件。

npm install zustand

---

5. Zustand的高級(jí)功能

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

Zustand 提供了一個(gè)中間件來(lái)將狀態(tài)持久化到 localStorage、sessionStorage 或其他存儲(chǔ)機(jī)制。

示例：

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;

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

2.合并多個(gè)商店

如果您想分離關(guān)注點(diǎn)或管理不同的狀態(tài)部分，Zustand 允許您組合多個(gè)商店。

示例：

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;

• 在這里，我們有兩個(gè)獨(dú)立的用戶(hù)和產(chǎn)品數(shù)據(jù)存儲(chǔ)。您可以在組件中獨(dú)立導(dǎo)入和使用它們。

---

6.結(jié)論

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

無(wú)論您是構(gòu)建小型應(yīng)用程序還是大型應(yīng)用程序，Zustand 都提供了一種輕量級(jí)、高效且可擴(kuò)展的方式來(lái)管理 React 中的狀態(tài)。

---

以上是Zustand：簡(jiǎn)單、快速且可擴(kuò)展的 React 狀態(tài)管理的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！