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 的工作原理是建立管理狀態(tài)的儲(chǔ)存空間並提供簡(jiǎn)單的掛鉤來(lái)存取和更新?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)用程式中管理本機(jī)和全域狀態(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)全域或本機(jī)管理狀態(tài)，而不會(huì)引入不必要的複雜性。

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)的物件。它可以使用 Zustand 提供的 create 函數(shù)來(lái)定義，並且可以包含操作狀態(tài)的方法。

範(fà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 })),
}));

• useStore 鉤子是使用 Zustand 的 create 函數(shù)建立的 store。狀態(tài)儲(chǔ)存在計(jì)數(shù)中，遞增和遞減等操作會(huì)修改狀態(tài)。

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

建立儲(chǔ)存空間後，您可以在 React 元件中使用 useStore 鉤子來(lái)讀取和修改狀態(tài)。

範(fà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 })),
}));

• useStore 掛鉤可讓您存取商店中定義的狀態(tài)和操作。您可以解構(gòu)所需的狀態(tài)和操作，並直接在元件中使用它們。

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

要更新?tīng)顟B(tài)，您可以使用商店中提供的 set 方法。 set 方法採(cǎi)用一個(gè)取得目前狀態(tài)並傳回新?tīng)顟B(tài)的函數(shù)。 Zustand 會(huì)自動(dòng)觸發(fā)使用已變更狀態(tài)的元件的重新渲染。

範(fà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;

• increment方法使用set函數(shù)透過(guò)增加目前值來(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ù)中的複雜性。

2.可擴(kuò)充

Zustand 可以輕鬆擴(kuò)展以適應(yīng)複雜的應(yīng)用程式。它支援跨應(yīng)用程式的本機(jī)狀態(tài)管理（針對(duì)各個(gè)元件）和全域狀態(tài)管理。 Zustand 旨在以最小的開(kāi)銷(xiāo)處理大型、可擴(kuò)展的應(yīng)用程式。

3.效能最佳化

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ò)鉤子直接存取狀態(tài)，無(wú)需額外設(shè)定即可輕鬆使用。

6.靈活不固執(zhí)

Zustand 不強(qiáng)制執(zhí)行任何模式或限制。您可以按照自己的喜好建立狀態(tài)，並將 Zustand 用作本機(jī)儲(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)執(zhí)行以下命令：

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 步：建立商店

建立一個(gè)儲(chǔ)存您的應(yīng)用程式狀態(tài)和操作的商店。這是一個(gè)簡(jiǎn)單的專(zhuān)櫃商店的範(fà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)建立了商店，您可以使用 useStore 鉤子存取 React 元件中的狀態(tài)和操作。

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

• 在此範(fàn)例中，useStore 用於存取當(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ī)制。

範(fà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 })),
}));

export default useStore;

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

2.合併多間商店

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

範(fà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;

• 在這裡，我們有兩個(gè)獨(dú)立的使用者和產(chǎn)品資料儲(chǔ)存。您可以在元件中獨(dú)立匯入和使用它們。

---

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)注於建立他們的應(yīng)用程序，而無(wú)需管理其他狀態(tài)管理庫(kù)的樣板。

無(wú)論您是建立小型應(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)文章！