過小評価されている React フック - useSyncExternalStore

概要

React エコシステムの隠れた強力な要素である「useSyncExternalStore」フックを発見します。この記事では、従来の状態管理パラダイムに挑戦し、その変革の可能性を掘り下げます。このフックは、外部データ ソースをシームレスに統合し、コンポーネント間の通信を強化することにより、型破りでありながら強力なアプローチを提供します。

useSyncExternalStore の謎を解き明かしながら、私たちと一緒に旅をしましょう。そのメカニズムを詳しく分析し、その利点を明らかにし、実際の例を通じて実用的なアプリケーションを紹介します。最後には、このフックを活用して複雑さを合理化し、パフォーマンスを向上させ、コードベースに新しいレベルの組織をもたらす方法を理解できるようになります。

使用法

React によると、useSyncExternalStore は外部ストアをサブスクライブできるようにする React フックです。しかし、「外部ストア」とは正確には何でしょうか?文字通り 2 つの関数を必要とします:

• subscribe 関数はストアをサブスクライブし、サブスクライブを解除する関数を返す必要があります。
• getSnapshot 関数はストアからデータのスナップショットを読み取る必要があります。 まあ、最初は入手するのが難しいかもしれません。例に入ってみましょう。

デモ

今日のデモでは、古典的なアプリケーションである「Todo リスト」を取り上げます。

ストア

まず、初期状態を定義する必要があります。

export type Task = {
  id: string;
  content: string;
  isDone: boolean;
};

export type InitialState = {
  todos: Task[];
};

export const initialState: InitialState = { todos: [] };

タイプを定義してから、todos を空の配列として持つ状態を作成したことがわかります

今度はリデューサーです:

export function reducer(state: InitialState, action: any) {
  switch (action.type) {
    case "ADD_TASK":
      const task = {
        content: action.payload,
        id: uid(),
        isDone: false,
      };
      return {
        ...state,
        todos: [...state.todos, task],
      };

    case "REMOVE_TASK":
      return {
        ...state,
        todos: state.todos.filter((task) => task.id !== action.payload),
      };

    case "COMPLETE_TASK":
      const tasks = state.todos.map((task) => {
        if (task.id === action.payload) {
          task.isDone = !task.isDone;
        }
        return task;
      });
      return {
        ...state,
        todos: tasks,
      };

    default:
      return state;
  }
}

私たちのリデューサーには、ADD_TASK、REMOVE_TASK、COMPLETE_TASK の 3 つのアクションしかありません。これは、To-Do リスト ロジックの典型的な例です。

最後に、私たちが待っているのはストアです:

let listeners: any[] = [];

function createStore(reducer: any, initialState: InitialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function dispatch(action: any) {
    state = reducer(state, action);

    emitChange();
  }

  function subscribe(listener: any) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  const store = {
    dispatch,
    getState,
    subscribe,
  };

  return store;
}

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

export const store = createStore(reducer, initialState);

このコード スニペットは、TypeScript での単純な Redux のような状態管理システムの作成を示しています。その仕組みを詳しく説明します:

1. listeners 配列: この配列には、状態が変化するたびに通知されるリスナー関数のリストが保持されます。

2. createStore 関数: この関数は Redux スタイルのストアを作成します。 2 つのパラメータを取ります:

• レデューサー: 現在の状態とディスパッチされたアクションに基づいて次の状態を計算する責任のあるリデューサー関数。
• InitialState: アプリケーションの初期状態。

1. state: この変数はアプリケーションの現在の状態を保持します。

2. getState 関数: 現在の状態を返します。

3. dispatch 関数: アクション オブジェクトを受け入れ、現在の状態とともにリデューサーに渡し、その結果で状態を更新してから、emitChange 関数を呼び出して状態の変更についてリスナーに通知します。

4. subscribe 関数: リスナー関数を受け入れ、それをリスナー配列に追加し、リスナーを削除するために呼び出すことができるクリーンアップ関数を返します。

5. store オブジェクト: 作成されたストア オブジェクトは、dispatch、getState、subscribe 関数への参照を保持します。

6. emitChange 関数: リスナー配列を反復処理し、各リスナー関数を呼び出して、状態の変化を通知します。

コードの最後で、createStore 関数を使用して、指定されたリデューサーと初期状態でストアが作成されます。このストアをインポートし、アプリケーションの他の部分で使用して状態を管理および制御できるようになりました。

このコードは状態管理システムの簡素化された実装を提供しており、Redux などのライブラリにあるいくつかの高度な機能や最適化が欠けていることに注意することが重要です。ただし、リスナーとリデューサー関数を使用した状態管理の基本概念を理解するための優れた出発点として役立ちます。

useSyncExternalStore フックを使用します。次のように状態を取得できます:

const { todos } = useSyncExternalStore(store.subscribe, store.getState);

このフック呼び出しを使用すると、可読性と保守性を維持しながら、ストアにグローバルかつ動的にアクセスできます

長所と短所

「useSyncExternalStore」フックは、React アプリケーション内の状態管理のコンテキストにおいて利点と潜在的な欠点の両方を示します。

長所:

1. 外部ソースとのシームレスな統合: フックにより、外部データ ソースとの簡単な統合が可能になり、状態管理への統一されたアプローチが促進されます。この統合により、さまざまな発信元からのデータの処理が簡素化され、アプリケーションの一体性が強化されます。

2. コンポーネント間通信: 「useSyncExternalStore」により、コンポーネント間の効率的な通信が促進され、データの共有が合理化され、複雑なプロパティのドリルリングやコンテキスト管理の必要性が軽減されます。

3. パフォーマンスの向上: 状態管理を一元化し、状態更新の伝播を最小限に抑えることで、このフックはレンダリング パフォーマンスを最適化し、アプリケーションの応答性と効率が向上する可能性があります。

4. シンプルさとクリーンなコード: フックの抽象化された API により、コードがよりクリーンでより整理され、特に大規模なアプリケーションでの理解と保守が容易になります。

5. ボイラープレートの削減: 「useSyncExternalStore」により、状態管理のための冗長なコードを記述する必要性が減り、アプリケーション全体の状態を管理するための簡潔で一貫した方法が提供されます。

短所:

1. 学習曲線: このフックに慣れていない開発者は、より確立された状態管理ソリューションから移行するときに学習曲線を経験する可能性があります。新しいアプローチに適応すると、最初は開発が遅くなる可能性があります。

2. カスタマイズの制限: フックの事前定義された機能は、すべてのアプリケーション固有の要件と完全に一致しない可能性があります。フックの機能を超えて動作をカスタマイズすると、追加の回避策が必要になる場合があります。

3. 潜在的な抽象化オーバーヘッド: フックの内部メカニズムによっては、アプリケーションのニーズに合わせてカスタマイズされたより最適化されたソリューションと比較して、フックによりパフォーマンスまたはメモリ使用量にわずかなオーバーヘッドが発生する可能性があります。

4. コミュニティとエコシステム: 過小評価されているか、あまり知られていないフックである「useSyncExternalStore」には、確立されたコミュニティと包括的なエコシステムが欠けている可能性があり、利用可能なリソースやサードパーティ ライブラリが少なくなる可能性があります。 .

5. 互換性と将来のアップデート: React の将来のバージョンとの互換性とフック自体の潜在的なアップデートが懸念事項となる可能性があります。長期的なサポートとシームレスなアップグレードを確保するには、特別な注意が必要な場合があります。

結論

要約すると、useSyncExternalStore は、シームレスな統合とコンポーネント間通信を重視した、状態管理への独自のアプローチを提供します。パフォーマンスの向上やコードの簡素化など、いくつかの利点がありますが、開発者はプロジェクトの要件との互換性を慎重に評価し、潜在的な学習曲線と制限を考慮する必要があります。

以上が過小評価されている React フック - useSyncExternalStoreの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。