Recoil: React 用の狀態(tài)管理ライブラリ

Recoil は、React アプリケーションの狀態(tài)を管理する強力かつ柔軟な方法を提供する React の狀態(tài)管理ライブラリです。 React の既存のパラダイムとシームレスに統(tǒng)合しながら、React での狀態(tài)管理をより簡単かつスケーラブルにするように設(shè)計されています。 Facebook によって開発された Recoil は、アプリケーションの狀態(tài)を処理するための一連の新しい概念を?qū)毪?、開発者に狀態(tài)管理のきめ細(xì)かい制御を提供するだけでなく、パフォーマンスの向上と複雑な狀態(tài)のより単純なパターンを提供します。

Recoil は、Redux や Context API などの従來の狀態(tài)管理ソリューションの代替として見なされ、特に大規(guī)模で複雑なアプリケーションを扱う場合に、最新の React アプリケーションにより適した新しい狀態(tài)管理方法を提供します。

---

1.反動の中心概念

Recoil では、開発者がより宣言的かつ柔軟な方法で狀態(tài)を管理できるようにするいくつかの中心的な概念が導(dǎo)入されています。

1.原子

原子は、Recoil の狀態(tài)の単位を表します。あらゆるタイプのデータを保持でき、コンポーネントはアトムをサブスクライブして値を読み書きできます。アトムを使用すると、さまざまなコンポーネント間で共有できる狀態(tài)を管理できます。

例:

import { atom } from 'recoil';

// Create an atom that holds a simple piece of state (counter)
export const counterState = atom({
  key: 'counterState', // Unique ID for this atom
  default: 0, // Default value of the atom
});

• atom は、Recoil でステート ユニットを作成するために使用されます。キーは一意である必要があり、デフォルトは狀態(tài)の初期値です。

2.セレクター

セレクターは、アトムまたは他のセレクターから狀態(tài)を?qū)С訾工腴v數(shù)です。これらを使用すると、原子または他のセレクターの現(xiàn)在の値に基づいて狀態(tài)を計算および変換できます。

例:

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState', // Unique ID for this selector
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2; // Derive state by doubling the counter
  },
});

• selector を使用すると、アトムから狀態(tài)を?qū)С訾扦蓼?。セレクター內(nèi)の get 関數(shù)は、アトムの現(xiàn)在の値を取得し、それに対して計算を?qū)g行できます。

3.リコイルルート

React アプリケーションで Recoil を使用するには、ルート コンポーネントを RecoilRoot でラップする必要があります。これにより、アプリに Recoil 狀態(tài)コンテキストが提供されます。

例:

import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

• RecoilRoot は、Recoil 狀態(tài)をアプリケーション全體で利用できるようにするプロバイダーです。

4. useRecoilState

useRecoilState フックは React の useState に似ていますが、Recoil アトムを?qū)澫螭趣筏皮い蓼?。これを使用すると、原子の狀態(tài)を読み取り、変更できます。

例:

import { atom } from 'recoil';

// Create an atom that holds a simple piece of state (counter)
export const counterState = atom({
  key: 'counterState', // Unique ID for this atom
  default: 0, // Default value of the atom
});

• useRecoilState を使用すると、原子の狀態(tài)を読み取り、それを直接更新できます。

5. useRecoilValue

アトムまたはセレクターの値を変更せずに読み取るだけの場合は、useRecoilValue を使用できます。

例:

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState', // Unique ID for this selector
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2; // Derive state by doubling the counter
  },
});

• useRecoilValue は、アトムまたはセレクターの値を取得するだけで、変更する必要がない場合に使用されます。

6. useSetRecoilState

原子の狀態(tài)を変更するだけで、読み取る必要がない場合は、useSetRecoilState を使用できます。

例:

import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

• useSetRecoilState を使用すると、値を読み取ることなくアトムの狀態(tài)を更新できます。

---

2.リコイルの利點

1.きめ細(xì)かい制御

Redux などの他の狀態(tài)管理ソリューションとは異なり、Recoil は狀態(tài)を管理するためのより柔軟かつきめ細(xì)かい方法を提供し、コンポーネントが特定のアトムまたはセレクターをサブスクライブできるようにします。

2.非同期狀態(tài)管理

リコイル セレクターは、非同期操作をシームレスに処理できます。これにより、狀態(tài)の一貫性を維持しながら、データのフェッチやその他の副作用の実行が容易になります。

3. React 用に構(gòu)築

Recoil は React 専用に設(shè)計されているため、React のコンポーネント ツリー、フック、コンテキスト メカニズムを活用し、よりシンプルなパターンとより優(yōu)れた統(tǒng)合を?qū)g現(xiàn)します。

4.定型文を減らす

Recoil は、定型文を最小限に抑えたシンプルな API を提供します。 Redux とは異なり、アクション、リデューサー、ディスパッチ関數(shù)を定義する必要がないため、より早く開始できます。

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

Recoil は、サブスクライブされている特定の狀態(tài) (アトムまたはセレクター) が変更された場合にのみコンポーネントが再レンダリングできるようにすることで、レンダリング パフォーマンスの最適化に役立ちます。これにより、不必要な再レンダリングが回避され、特に大規(guī)模なアプリでのパフォーマンスが向上します。

---

3.フルリコイル応用例

Recoil を使用してシンプルなカウンター アプリを構(gòu)築する方法の例を次に示します。

import { useRecoilState } from 'recoil';
import { counterState } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useRecoilState(counterState);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

import { useRecoilValue } from 'recoil';
import { doubleCounterState } from './selectors';

const DisplayDouble = () => {
  const doubleCounter = useRecoilValue(doubleCounterState);

  return <p>Double Counter: {doubleCounter}</p>;
};

import { useSetRecoilState } from 'recoil';
import { counterState } from './atoms';

const ResetButton = () => {
  const setCounter = useSetRecoilState(counterState);

  const reset = () => setCounter(0);

  return <button onClick={reset}>Reset Counter</button>;
};

この簡単な例では:

• カウンタの値を保持するアトム (counterState) を定義します。
• Counter コンポーネントは useRecoilState を使用してカウンターの値を読み取り、更新します。
• RecoilRoot は、Recoil の狀態(tài)管理を初期化するためにアプリケーションのルートで使用されます。

---

4.結(jié)論

Recoil は、React アプリケーションの狀態(tài)管理のための最新かつ柔軟なソリューションを提供します。強力なアトムとセレクター モデルにより、より効率的な狀態(tài)更新が可能になり、コンポーネント全體の狀態(tài)管理の複雑さが軽減されます。これは、複數(shù)のコンポーネント間で狀態(tài)を共有および更新する必要があるアプリケーションに特に役立ちます。

---

以上がRecoil: React 用の最新の狀態(tài)管理ライブラリの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。