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;

登入後複製