Jotai: React 用のシンプルで強力な状態管理ライブラリ-jsチュートリアル-php.cn

Jotai: A Simple and Powerful State Management Library for 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
  }
);

ログイン後にコピー