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 をインストールする詳細なチュートリアル

推薦する

MySQL MGR の利点は何ですか?

MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...

JS で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法

目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

MySQL 8の新機能におけるグローバルパラメータの永続性の詳細な説明

目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....

40以上の美しいWebフォームデザイン例

Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...

Linux での中国語入力方法の問題を素早く解決する

背景: 最近、資産報告関連の機能に取り組んでおり、中国語入力をサポートする必要があります。通常のショ...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

Sublime Text - ブラウザのショートカットキーを設定するための推奨方法

コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...

MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル(MAC)

この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...

MySQL での GROUP_CONCAT の使用例の分析

この記事では、例を使用して、MySQL で GROUP_CONCAT を使用する方法について説明しま...

MySQL グループレプリケーションの設定手順 (推奨)

MySQL-Group-Replication は、MySQL-5.7.17 で開発された新しい機...

MYSQL 演算子の概要

目次1. 算術演算子2. 比較演算子3. 論理演算子4. ビット演算子5. 演算子の優先順位1. 算...

HTMLを使用してシンプルなメールテンプレートを作成する

今日は、「ローテク」の問題について書きたいと思います。ちなみに、私は JavaScript Week...

{{ }} で関数を直接使用する WeChat アプレットの例

序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...

MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...