Jotai: React 用のシンプルで強力な状態管理ライブラリ

Jotai: React 用の原始的で柔軟な状態管理ライブラリ

Jotai は、React アプリケーション用の最小限の状態管理ライブラリです。これは、状態を管理するためのシンプルでアトミックなアプローチを提供し、アーキテクチャを無駄がなく理解しやすい状態に保ちながら、コンポーネント内で状態を直接管理および更新できるようにします。 Jotai は、高いパフォーマンスと柔軟性を備えているように設計されており、小規模プロジェクトから大規模アプリケーションまで、あらゆる規模の React アプリケーションに最適です。

Jotai は、シンプルな API と小さなバンドル サイズにより、Redux のようなより複雑な状態管理ライブラリによく関連付けられるボイラープレートのないアトミックな状態管理を好む開発者に特に適しています。

---

1. Jotai の核となる概念

Jotai は、React での状態管理を容易にするいくつかの重要な概念を備えた簡単な API を導入しています。

1.原子

Jotai の原子は、Recoil の原子と同様に、状態の最小単位を表します。アトムは単一の状態を保持し、コンポーネントはアトムの値を読み書きできます。アトムは世界中からアクセスでき、Jotai の状態管理の基盤です。

例:

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• atom は状態の単位を定義するために使用されます。このアトムの値は、React コンポーネントで読み書きすることができます。

2. useAtom

useAtom フックは、Jotai でアトムを操作するための主な方法です。これにより、コンポーネントがアトムの値を読み取り、更新できるようになります。これは useState の使用に似ていますが、コンポーネント間で状態を共有する機能があります。

例:

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  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>
  );
};

• useAtom は、アトムの状態を取得および設定するために使用されます。最初の値 (counter) は現在の状態で、2 番目の値 (setCounter) は状態を更新するために使用される関数です。

3.派生原子

Jotai を使用すると、他の原子または派生データに依存する 派生アトム を作成できます。これらは Recoil のセレクターに似ており、他のアトムに基づいて新しい値を計算できます。

例:

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

• 派生アトムは、他のアトムを読み取り、それらのアトムに基づいて新しい値を返す関数を使用して作成されます。

4.アトムエフェクト

Jotai は、アトム値の変化に応じてコードを実行できる アトム エフェクト もサポートしています。これにより、状態が変化したときにデータのフェッチやコールバックの実行などの副作用を実行できるようになります。

例:

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• このパターンでは、アトムの状態が変化するたびに API 呼び出しやロギングなどの副作用を実行できます。

---

2. Jotai を使用するメリット

1.シンプルで軽量

Jotai は、非常に小さな API サーフェスを備えた、最小限かつ軽量になるように設計されています。アクション クリエーターやリデューサーのような定型コードが必要ないため、より早く使い始めることができます。

2.パフォーマンス

Jotai は リアクティブ モデルを使用します。このモデルでは、特定のアトムが変更されたときに、そのアトムを使用するコンポーネントのみが再レンダリングされます。これにより、特に多くのコンポーネントを含む大規模なアプリケーションの場合、効率的な更新が可能になります。

3.きめ細かい制御

Jotai を使用すると、アプリケーション内の状態をきめ細かく制御できます。アトムは独立しているため、リデューサーやコンテキスト プロバイダーなどの複雑な構造を必要とせずに直接管理できます。

4.最小限の再レンダリング

Jotai は、コンポーネント ツリー全体を再レンダリングするのではなく、変更された特定のアトムをサブスクライブするコンポーネントのみを更新することによって、再レンダリングを最適化します。

5.スケーラブルで柔軟

Jotai のアトミックな設計により、アプリケーションの成長に合わせて簡単に拡張できます。アプリケーションの状態のさまざまな部分を表す複数の独立したアトムを持つことができるため、アーキテクチャがクリーンで柔軟になります。

---

3.完全な常体アプリケーションの例

Jotai を使用した小さなカウンター アプリの例を次に示します。

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  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 { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

import { atom } from 'jotai';

export const counterAtom = atom(
  0, // Initial value
  (get, set, update) => {
    // Atom effect: run a side effect when the counter is updated
    console.log('Counter updated:', update);
    set(counterAtom, update); // Update the state of counterAtom
  }
);

仕組み:

• Atom はカウンター (counterAtom) の状態を保持します。
• useAtom は、アトムの値の読み取りと更新の両方に Counter コンポーネント内で使用されます。
• setCounter は、ボタンがクリックされたときにアトムの状態を更新します。

---

4.常体を使用する場合

Jotai は次の場合に最適です。

• あなたには、シンプルで効率的な状態管理ソリューションが必要です。
• 原子レベルで状態を管理したいと考えています。
• 追加の定型文を必要とせず、宣言的で柔軟な API を好みます。
• あなたは、高いパフォーマンスと再レンダリングのきめ細かい制御を必要とするプロジェクトに取り組んでいます。

プロジェクトが小規模である場合、または Redux のような大規模な状態管理ソリューションの複雑さを回避したい場合、Jotai はシンプルで強力な代替手段を提供します。

---

5.結論

Jotai は、アトミックな状態とミニマリズムに焦点を当てた、強力かつ軽量の状態管理ライブラリです。シンプルな API、パフォーマンスの最適化、きめ細かい制御を備えた Jotai は、柔軟で効率的な状態管理ソリューションを求める React 開発者にとって優れた選択肢です。

---

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