簡単に説明すると、これら 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 をインストールする詳細なチュートリアル
MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...
目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...
質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...
目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....
Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...
背景: 最近、資産報告関連の機能に取り組んでおり、中国語入力をサポートする必要があります。通常のショ...
1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...
コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...
この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...
この記事では、例を使用して、MySQL で GROUP_CONCAT を使用する方法について説明しま...
MySQL-Group-Replication は、MySQL-5.7.17 で開発された新しい機...
目次1. 算術演算子2. 比較演算子3. 論理演算子4. ビット演算子5. 演算子の優先順位1. 算...
今日は、「ローテク」の問題について書きたいと思います。ちなみに、私は JavaScript Week...
序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...
この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...