導入

React の世界で非常に便利で包括的なものは、コードのスケーラビリティを維持し、作成するコンポーネントに意味を追加するのに役立つデザイン パターンです。

いくつかのパターンがありますが、この記事では、柔軟な複合インターフェイスの作成に特に役立つ高度なパターンである複合コンポーネントについて説明します。

複合コンポーネントとは何ですか?

複合コンポーネントは React の高度なパターンです。これは、親コンポーネントと子コンポーネント間の通信を柔軟な方法で行う必要がある場合に、コンポーネントのグループ間で状態とロジックを共有できるようにする、より柔軟な設計を作成することを目的としています。

コンポーネントは、将来リファクタリングしたり理解したりするには複雑すぎる、恥ずかしいプロップ ツリーやロジックを作成することなく、連携して動作する必要があります。

このパターンは、コンポーネント間でプロップ ツリーを渡す必要があるプロップ フレーミングを排除するのに役立ちます。このプロパティの注入は、各状態がすべての子コンポーネントを更新するため、更新される各状態で複数の不必要な再レンダリングを引き起こす可能性があるため問題です。

HTML の選択タグとオプション タグの構造における複合コンポーネントの例があります:

選択はインターフェイス状態マネージャーとして機能しますが、オプションは選択がどのように機能するかで構成されます。

複合コンポーネントを使用した例

この例では、Toggle と Content の 2 つの複合コンポーネントに分割されるモーダルを作成します。モーダルの開閉状態を共有する場所。

このコンポーネントを段階的に作成するとどうなるかを見てみましょう:

モーダルの開閉状態を管理するコンテキストを作成することから始めます

モーダルコンポーネントのベースの作成

子を使用していることに注意してください。モーダルに挿入されるコンポーネントを取得するには、次のように使用します。

次に、モーダルを開く役割を果たすトグル コンポーネントを作成する必要があります

モーダルのコンテンツの表示を担当するコンテンツ コンポーネントも必要です

最後に、両方をモーダル コンポーネントに割り当てることができます。これで完了です (:

使用中

結果

このようにして、モーダルの作成と使用が非常に柔軟で再利用可能になります。 Modal.Toggle はモーダル表示をアクティブにする役割を果たしますが、Modal.Content はモーダルのコンテンツを表示する必要があります。

このフレームワークを使用すると、開発者はアプリケーションの特定のニーズに応じてモーダルの動作とコンテンツを簡単にカスタマイズでき、コードがよりクリーンでより整理されたものになります。

その他の例

他のコンテキストでも複合コンポーネントを使用できます。例:

アコーディオンコンポーネント:

メニューコンポーネント:

すべてが柔軟で順応性があり、コンポーネントの開発、拡張性、使用を容易にします。

結論

複合コンポーネント パターンでコンポーネントを記述することがアプリケーションでどのように役立つかを確認しました。また、その使用方法と、このパターンが適合するいくつかの例も確認しました。

Compoud Components を使用したコンポーネントの作成を自由に探索して試してみてください。賢明に使用して、コンテキストに適用することが本当に意味があるかどうかを確認してください。うまく適用されていない場合、場合によっては、むしろ障害となる可能性があります。助けてください。

注: 私はこれと同じコンテンツを、react ユニバースの開発者によって作成された記事をグループ化するために設計されたリポジトリである、react4noobs に投稿しました。チェックしてみる価値があります =).