Zustand: React 用の小型、高速、スケーラブルな狀態(tài)管理ソリューション

Zustand は、React 用の最小限で高速かつスケーラブルな狀態(tài)管理ライブラリです。パフォーマンスとスケーラビリティに重點(diǎn)を置いた狀態(tài)管理のための、定型文のないシンプルなソリューションを提供することを目的としています。 Zustand は、狀態(tài)を管理するストアを作成し、狀態(tài)にアクセスして更新するための単純なフックを提供することで機(jī)能します。

ライブラリの名前である Zustand は、ドイツ語で「狀態(tài)」を意味する言葉に由來しており、React での狀態(tài)の操作が直感的かつ強(qiáng)力になるように設(shè)計(jì)されています。 Zustand はそのシンプルさと柔軟性で傑出しており、React アプリケーションのローカル狀態(tài)とグローバル狀態(tài)の両方を管理するのに最適です。

---

1.ズスタンドとは

Zustand は、React アプリケーション用の小規(guī)模で、偏見のない、リアクティブな狀態(tài)管理ライブラリです。これは、狀態(tài)に簡単にアクセスして変更できるようにするフックを備えた柔軟なストアを提供します。 Zustand は特定のアーキテクチャに束縛されていないため、不必要な複雑さを?qū)毪工毪长趣胜哎愆`バルまたはローカルに狀態(tài)を管理するために使用できます。

Zustand の主な特徴:

• 最小限の API: Zustand にはコード行が非常に少ないシンプルな API があります。
• ボイラープレートなし: Redux とは異なり、Zustand は動(dòng)作するためにアクションやリデューサーを必要とせず、追加のセットアップも必要ありません。
• ストアベース: Zustand はストアを使用してアプリケーションの狀態(tài)を管理し、整理と拡張を容易にします。
• React フレンドリー: Zustand は、フックとコンテキスト API を活用して React とスムーズに統(tǒng)合します。

---

2. Zustand の核となるコンセプト

1.ストア

Zustand の

ストア は、アプリケーションの狀態(tài)を保持する?yún)gなるオブジェクトです。 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ù)を使用して作成されたストアです。狀態(tài)は count に保存され、インクリメントやデクリメントなどのアクションによって狀態(tài)が変更されます。

2.狀態(tài)にアクセス中

ストアを作成したら、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)とアクションを構(gòu)造化して、コンポーネント內(nèi)で直接使用できます。

3.狀態(tài)を更新中

狀態(tài)を更新するには、ストアで提供されている set メソッドを使用します。 set メソッドは、現(xiàn)在の狀態(tài)を取得して新しい狀態(tài)を返す関數(shù)を受け取ります。 Zustand は、変更された狀態(tài)を使用するコンポーネントの再レンダリングを自動(dòng)的にトリガーします。

例:

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;

• インクリメントメソッドは、set 関數(shù)を使用して、現(xiàn)在の値をインクリメントすることでカウント狀態(tài)を更新します。

---

3.ズスタンドのメリット

1.シンプルかつミニマル

Zustand は軽量で非常にシンプルな API を備えているため、あらゆる React アプリケーションで驚くほど簡単に使い始めることができます。ボイラープレート コード、リデューサー、アクション タイプがないため、Redux などの他のライブラリに見られる複雑さを持たずに React で狀態(tài)を管理するための優(yōu)れた代替手段となります。

2.スケーラブル

Zustand は複雑なアプリケーションに合わせて簡単に拡張できます。ローカル狀態(tài)管理 (個(gè)々のコンポーネント用) とアプリケーション全體にわたるグローバル狀態(tài)管理の両方をサポートします。 Zustand は、最小限のオーバーヘッドで大規(guī)模でスケーラブルなアプリケーションを処理できるように設(shè)計(jì)されています。

3.最適化されたパフォーマンス

Zustand は React の組み込みフックとコンテキストを使用して、狀態(tài)の変更を効率的にサブスクライブし、再レンダリングが必要なコンポーネントのみを更新します。これにより、大規(guī)模なアプリケーションでも優(yōu)れたパフォーマンスが保証されます。

4. TypeScript のサポート

Zustand は優(yōu)れた TypeScript サポートを備えており、すぐに使えるタイプセーフ ストアとフックを提供します。

5.プロバイダーは必要ありません

一部の狀態(tài)管理ライブラリとは異なり、Zustand ではアプリケーションにプロバイダーをラップする必要がありません。フックを介して狀態(tài)に直接アクセスできるため、追加のセットアップを行わずに簡単に使用できます。

6.柔軟で偏見を持たない

Zustand は、いかなるパターンや制限も強(qiáng)制しません。好きなように狀態(tài)を構(gòu)築し、Zustand をローカル ストアまたはグローバル ステート マネージャーとして使用できます。これにより、アプリケーションの狀態(tài)を最適な方法で整理するための完全な柔軟性が得られます。

---

4. Zustand と React の統(tǒng)合

Zustand を React アプリケーションに統(tǒng)合するのは非常に簡単です。 React アプリで Zustand をセットアップするためのステップバイステップのガイドは次のとおりです:

ステップ 1: Zustand をインストールする

Zustand をインストールするには、次のコマンドを?qū)g行します:

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: ストアを作成する

アプリケーションの狀態(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: コンポーネント內(nèi)のストアを使用する

ストアを作成したので、useStore フックを使用して React コンポーネントの狀態(tài)とアクションにアクセスできます。

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

• この例では、useStore を使用して現(xiàn)在のカウントとカウントを変更する (インクリメントとデクリメント) メソッドにアクセスします。

ステップ 4: アプリでコンポーネントを使用する

最後に、アプリで Counter コンポーネントをレンダリングできます。

npm install zustand

---

5. Zustand の高度な機(jī)能

1.永続狀態(tài)

Zustand は、localStorage、sessionStorage、またはその他のストレージ メカニズムに狀態(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 })),
}));

export default useStore;

• このミドルウェアはカウント狀態(tài)を localStorage に永続化するため、ページがリロードされた後でも狀態(tài)が維持されます。

2.複數(shù)のストアを組み合わせる

Zustand を使用すると、懸念事項(xiàng)を分離したり、狀態(tài)のさまざまなスライスを管理したりする場(chǎng)合に、複數(shù)のストアを組み合わせることができます。

例:

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;

• ここでは、ユーザー データと製品データ用に 2 つの獨(dú)立したストアがあります。これらをコンポーネントに個(gè)別にインポートして使用できます。

---

6.結(jié)論

Zustand は、React アプリケーションの狀態(tài)を管理するための、最小限で柔軟かつパフォーマンスの高いソリューションを提供します。そのシンプルさと拡張性により、小規(guī)模と大規(guī)模の両方の React アプリにとって優(yōu)れた選択肢となります。 Zustand を使用すると、フックとリアクティブ パターンを使用することで、開発者は他の狀態(tài)管理ライブラリのボイラープレートを管理する必要がなく、アプリケーションの構(gòu)築に集中できます。

小規(guī)模なアプリを構(gòu)築している場(chǎng)合でも、大規(guī)模なアプリケーションを構(gòu)築している場(chǎng)合でも、Zustand は React で狀態(tài)を管理するための軽量で効率的かつスケーラブルな方法を提供します。

---

以上がZustand: React のシンプル、高速、スケーラブルな狀態(tài)管理の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。