Jotai: React 用の原始的で柔軟な狀態(tài)管理ライブラリ

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

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

---

1. Jotai の核となる概念

Jotai は、React での狀態(tài)管理を容易にするいくつかの重要な概念を備えた簡(jiǎn)単な API を?qū)毪筏皮い蓼埂?/p>

1.原子

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

例:

import { atom } from 'jotai';

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

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

2. useAtom

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

例:

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 は、アトムの狀態(tài)を取得および設(shè)定するために使用されます。最初の値 (counter) は現(xiàn)在の狀態(tài)で、2 番目の値 (setCounter) は狀態(tài)を更新するために使用される関數(shù)です。

3.派生原子

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

例:

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

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

4.アトムエフェクト

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

例:

import { atom } from 'jotai';

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

• このパターンでは、アトムの狀態(tài)が変化するたびに API 呼び出しやロギングなどの副作用を?qū)g行できます。

---

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

1.シンプルで軽量

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

2.パフォーマンス

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

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

Jotai を使用すると、アプリケーション內(nèi)の狀態(tài)をきめ細(xì)かく制御できます。アトムは獨(dú)立しているため、リデューサーやコンテキスト プロバイダーなどの複雑な構(gòu)造を必要とせずに直接管理できます。

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

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

5.スケーラブルで柔軟

Jotai のアトミックな設(shè)計(jì)により、アプリケーションの成長(zhǎng)に合わせて簡(jiǎn)単に拡張できます。アプリケーションの狀態(tài)のさまざまな部分を表す複數(shù)の獨(dú)立したアトムを持つことができるため、アーキテクチャがクリーンで柔軟になります。

---

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) の狀態(tài)を保持します。
• useAtom は、アトムの値の読み取りと更新の両方に Counter コンポーネント內(nèi)で使用されます。
• setCounter は、ボタンがクリックされたときにアトムの狀態(tài)を更新します。

---

4.常體を使用する場(chǎng)合

Jotai は次の場(chǎng)合に最適です。

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

プロジェクトが小規(guī)模である場(chǎng)合、または Redux のような大規(guī)模な狀態(tài)管理ソリューションの複雑さを回避したい場(chǎng)合、Jotai はシンプルで強(qiáng)力な代替手段を提供します。

---

5.結(jié)論

Jotai は、アトミックな狀態(tài)とミニマリズムに焦點(diǎn)を當(dāng)てた、強(qiáng)力かつ軽量の狀態(tài)管理ライブラリです。シンプルな API、パフォーマンスの最適化、きめ細(xì)かい制御を備えた Jotai は、柔軟で効率的な狀態(tài)管理ソリューションを求める React 開(kāi)発者にとって優(yōu)れた選択肢です。

---

以上がJotai: React 用のシンプルで強(qiáng)力な狀態(tài)管理ライブラリの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。