Reactでコンポーネントロジックを共有する3つの方法

簡単に説明すると、これら 3 つの方法は、レンダリングプロップ、高階コンポーネント、カスタムフックです。以下は

次のように、ユーザーが現在のページに滞在する時間を記録する専用の TimeOnPage コンポーネントがあるとします。

定数TimeOnPage = () => {
 定数[秒、setSecond] = useState(0);

 使用効果(() => {
  タイムアウトを設定する(() => {
   setSecond(秒 + 1);
  }, 1000);
 }、 [2番]）;
 戻る （
  <div>滞留時間: {second} 秒</div>
 );
}

別のコンポーネントでこの機能を再利用する必要がある場合、他のコンポーネントと簡単に共有できるようにカプセル化できますか?

ネストされたサブコンポーネントを考え、プロパティを使用してパラメータを渡すのは自然なことです。

const 子 = (props) => {
 <div>stayTime: {props.stayTime}s</div> を返します。
};

定数TimeOnPage = () => {
 定数[秒、setSecond] = useState(0);

 使用効果(() => {
  タイムアウトを設定する(() => {
   setSecond(秒 + 1);
  }, 1000);
 }、 [2番]）;
 戻る （
  <div>
   <子の滞在時間={秒} />
  </div>
 );
}

これは TimeOnPage コンポーネント内にハードコードされており、カプセル化と再利用の目標はまだ達成されていません。レンダリングプロップがどのように機能するかわかりますか?

レンダリングプロップ

「レンダリングプロップ」とは、値が関数であるプロップを使用して React コンポーネント間でコードを共有するシンプルな手法を指します。

前回の記事に引き続き、TimeOnPage で関数値を持つプロパティを定義します。コンポーネントをレンダリングする場合は、関数内でそれを返すだけです。関数のパラメーターは、共有したい状態です。

const 子 = (props) => {
 <div>stayTime: {props.stayTime}s</div> を返します。
};

const TimeOnPage = (props) => {
 定数[秒、setSecond] = useState(0);

 使用効果(() => {
  タイムアウトを設定する(() => {
   setSecond(秒 + 1);
  }, 1000);
 }、 [2番]）;
 <div>{props.render(second)}</div> を返します。
};

<TimeOnPage レンダリング ={(stayTime) => <Child stayTime ={stayTime} />

実際、レンダリングプロップは、どのコンテンツをレンダリングする必要があるかをコンポーネントに伝えるために使用される関数プロップです。
React Router もこのテクニックを使用します。

<ルーター>
 <Route path="/home" render={() => <div>ホーム</div>} />
</ルーター>

高階コンポーネント

高階コンポーネント (HOC) は、React でコンポーネントロジックを再利用する高度な手法です。 HOC 自体は React API の一部ではなく、React の構成特性に基づいた設計パターンです。

高階コンポーネントとは、再利用する必要があるコンポーネント A をパラメーターとし、戻り値が新しいコンポーネント N である関数です。新しいコンポーネント N はコンポーネント A に基づいて処理されますが、コンポーネント A 自体は変更されず、機能のみが強化されます。

次のようなニュースリストコンポーネントがあるとします。

定数NewList = () => {
 戻る （
  <div>
   <ul>
    <li>ニュース記事</li>
    <li>ニュース記事</li>
   </ul>
  </div>
 );
}

ニュースリストの読み込み中に読み込みアニメーションコンポーネント<Loading />を表示したい場合は、通常次のようにします。

const 読み込み = () => {
 // アニメーションの読み込み}
const NewList = ({ isLoading }) => {
 isLoading を返します? (
  <読み込み中 />
 ) : (
  <div>
   <ul>
    <li>ニュース記事</li>
    <li>ニュース記事</li>
   </ul>
  </div>
 );
};

テーブルコンポーネントでも、同様のパターンに従って、データの読み込み中に読み込みアニメーションコンポーネントを表示したいとします。

const 読み込み = () => {
 // アニメーションの読み込み}
const DataList = ({ isLoading, ...props }) => {
 isLoading を返します? (
  <読み込み中 />
 ) : (
  <テーブル {...props} />
 );
};

上記から、DataList と NewList の構造が非常に似ていることがわかります。ロードする 3 番目と 4 番目のコンポーネントがある場合、このパターンを 3 回目と 4 回目に繰り返し続けるのでしょうか?これは最も理想的なアプローチではありません。より良いアプローチは、高階コンポーネントを使用してこのパターンを抽象化することです。

const WithLoading = (WrappedComponent) => {
 戻り値 ({isLoading, ...props}) => {
  isLoading を返します。<Loading />: <WrappedComponent {...props} />;
 }
};

その後、NewListとDataListを変更せずに、個別にロードを追加できます。

定数NewList = () => {
 戻る （
  <div>
   <ul>
    <li>ニュース記事</li>
    <li>ニュース記事</li>
   </ul>
  </div>
 );
};

const DataList = (props) => {
 <Table {...props} /> を返します。
};

const WithLoading = (WrappedComponent) => {
 戻り値 ({isLoading, ...props}) => {
  isLoading を返します。<Loading />: <WrappedComponent {...props} />;
 }
};
// 読み込み中の NewList
定数 WithLoadingNewList = WithLoading(<NewList />)
// 読み込み中の DataList
const WithLoadingDataList = WithLoading(<DataList />)

カスタムフック

フックは React 16.8 の新機能です。クラスを記述せずに状態やその他の React 機能を使用できるようになります。

React フックには、useState、useEffect などが含まれます。これらはすべて関数です。カスタムフックも関数です。その名前も use で始まります。他のフックは関数内で呼び出すことができます。 React コンポーネントとは異なり、カスタムフックは値を返す必要はありません。通常の関数とは異なり、カスタムフックは他のフックを呼び出すことができますが、通常の関数は呼び出すことができません。

ビジネスロジックを記述する場合、再利用可能なメソッドの一部は一般にツール関数として定義され、どこでも再利用できます。同様に、フックをカスタマイズすることで、コンポーネントロジックを再利用可能な関数に抽出できます。カスタムフックを選択するかツール関数を選択するかは、抽出するコンポーネントロジックに他のフックが必要かどうかによって決まります。必要な場合はカスタムフックを選択し、そうでない場合はツール関数を使用します。

この記事の最初のTimeOnPageコンポーネントに戻り、カスタムフックに変更します。

定数useTimeOnPage = () => {
 定数[秒、setSecond] = useState(0);

 使用効果(() => {
  タイムアウトを設定する(() => {
   setSecond(秒 + 1);
  }, 1000);
 }、 [2番]）;
 2番目を返します。
}

使い方

constデモ = () => {
 const stayTime = useTimeOnPage();
 <div>現在のページの滞在時間: {stayTime} 秒</div> を返します。
}

要約する

コンポーネントロジックを共有する 3 つの方法には、それぞれ適用可能なシナリオがあります。
レンダリングプロップは、親コンポーネントを異なるサブコンポーネント/サブ要素と共有するのに適しています。サブコンポーネント/サブ要素の「ピット」が定義されており、指定された位置にのみレンダリングできます。
高階コンポーネントは、元のコンポーネントを変更せずにコンポーネントを拡張するのに適しています。
純粋関数は基本的にカスタムフックと同じ機能を実行できますが、カスタムフックを使用する方が便利で高速な場合もあります。
この記事へのリンク: Github

これで、React でコンポーネントロジックを共有する 3 つの方法についての記事は終了です。React の共有コンポーネントロジックに関する詳細なコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: