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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React コンポーネントのリファクタリング: ネスト + 継承と高階コンポーネントの説明
  • Reactにおけるネストされたコンポーネントとネストされたコンポーネント間の通信プロセス
  • 簡潔なReactコンポーネントを書くためのヒント
  • フックを使用して React コンポーネントを書くときに注意すべき 5 つの点
  • Reactはラジオコンポーネントのサンプルコードを実装します
  • ReactとAntdのFormコンポーネントを組み合わせてログイン機能を実装する方法を詳しく説明します
  • Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード
  • React antd タブの切り替えによりサブコンポーネントが繰り返し更新される
  • react-antd でポップアップ フォームのコンテンツを親コンポーネントに渡す方法
  • Reactプロジェクトでantdのフォームコンポーネントを使用して、入力ボックスの値を動的に設定する
  • Reactにおけるコンポーネントロジックの再利用についての簡単な説明
  • React のネストされたコンポーネントの構築順序

<<:  MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

>>:  Centos7 に PHP と Nginx をインストールする詳細なチュートリアル

推薦する

vue WatchとComputedの使用の概要

目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...

Vue でフルスクリーンを実装し、フルスクリーン終了を監視する

目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...

JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...

Linux システム Docker への ASP.NET Core アプリケーションのデプロイのプロセス分析

目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...

興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...

JS の 6 つの継承方法とその長所と短所

目次序文プロトタイプチェーン継承コンストラクタの継承組み合わせ継承(プロトタイプチェーン継承とコンス...

MySQL ストアド プロシージャの権限の問題の概要

MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...

Windows での MySQL 5.7.18 インストール チュートリアル

この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...

JSコードコンパイラMonacoの使い方

序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...

Ubuntu 16.4 で完全に分散された Hadoop 環境を構築するための実践的なチュートリアル

序文この記事は主にubantu 16.4 Hadoop完全分散構築に関する関連コンテンツを紹介し、皆...

LinuxにComposerをインストールする方法

1. インストールスクリプト(composer-setup.php)を現在のディレクトリにダウンロー...

フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...

IE8を閲覧するときにウェブサイトが自動的にIE7互換モードを使用するようにする

序文IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

MySQLとElasticsearch間のデータ非対称性問題の解決策

MySQLとElasticsearch間のデータ非対称性問題の解決策jdbc-input-plugi...