Recoil: React 用の最新の状態管理ライブラリ

Recoil: React 用の状態管理ライブラリ

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

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

---

1.反動の中心概念

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

1.原子

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

例:

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 でステート ユニットを作成するために使用されます。キーは一意である必要があり、デフォルトは状態の初期値です。

2.セレクター

セレクターは、アトムまたは他のセレクターから状態を導出する関数です。これらを使用すると、原子または他のセレクターの現在の値に基づいて状態を計算および変換できます。

例:

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 を使用すると、アトムから状態を導出できます。セレクター内の get 関数は、アトムの現在の値を取得し、それに対して計算を実行できます。

3.リコイルルート

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

例:

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

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

• RecoilRoot は、Recoil 状態をアプリケーション全体で利用できるようにするプロバイダーです。

4. useRecoilState

useRecoilState フックは React の useState に似ていますが、Recoil アトムを対象としています。これを使用すると、原子の状態を読み取り、変更できます。

例:

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 を使用すると、原子の状態を読み取り、それを直接更新できます。

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

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

例:

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

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

• useSetRecoilState を使用すると、値を読み取ることなくアトムの状態を更新できます。

---

2.リコイルの利点

1.きめ細かい制御

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

2.非同期状態管理

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

3. React 用に構築

Recoil は React 専用に設計されているため、React のコンポーネント ツリー、フック、コンテキスト メカニズムを活用し、よりシンプルなパターンとより優れた統合を実現します。

4.定型文を減らす

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

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

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

---

3.フルリコイル応用例

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

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 の状態管理を初期化するためにアプリケーションのルートで使用されます。

---

4.結論

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

---

以上がRecoil: React 用の最新の状態管理ライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。