簡単に説明すると、これら 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} /> 実際、レンダリング プロップは、どのコンテンツをレンダリングする必要があるかをコンポーネントに伝えるために使用される関数プロップです。 <ルーター> <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 つの方法には、それぞれ適用可能なシナリオがあります。 これで、React でコンポーネント ロジックを共有する 3 つの方法についての記事は終了です。React の共有コンポーネント ロジックに関する詳細なコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)
>>: Centos7 に PHP と Nginx をインストールする詳細なチュートリアル
目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...
目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...
目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...
目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...
js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...
目次序文プロトタイプチェーン継承コンストラクタの継承組み合わせ継承(プロトタイプチェーン継承とコンス...
MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...
この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...
序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...
序文この記事は主にubantu 16.4 Hadoop完全分散構築に関する関連コンテンツを紹介し、皆...
1. インストールスクリプト(composer-setup.php)を現在のディレクトリにダウンロー...
目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...
序文IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE...
過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...
MySQLとElasticsearch間のデータ非対称性問題の解決策jdbc-input-plugi...