導入

反応の世界で最も便利で広く使用されている概念の1つは、コードをスケーラブルに保ち、作成したコンポーネントに追加の意味を与えるのに役立つため、デザインパターンです。

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

複合成分とは何ですか？

複合コンポーネントは、反応の高度なパターンです。その目標は、コンポーネントのグループ間で状態と論理の共有を可能にすることにより、より柔軟な設計を作成することです。このようにして、親コンポーネントと子コンポーネント間の通信は、柔軟な方法で実現できます。

コンポーネントは、複雑な小道具や、将来リファクタリングまたは理解するのが難しい複雑なプロップツリーや過度に複雑なロジックを作成せずに特定の動作を実現するために協力します。

このパターンは、いくつかのコンポーネント層を通して多数の小道具を通過するプロップ掘削を排除するのに役立ちます。各状態の変更がすべての子コンポーネントを更新するため、州が更新されるたびに不必要な再レンダーを引き起こす可能性があるため、プロップ掘削は問題が発生する可能性があります。

。

複合成分の例は、選択タグとオプションタグのHTML構造に見ることができます：

選択要素はインターフェイスの状態マネージャーとして機能し、オプション要素は選択コンポーネントの機能を構成します。

複合成分を使用した例

この例では、モーダルを作成します。モーダルは、トグルとコンテンツの2つの複合コンポーネントに分割されます。モーダルのオープン/クローズ状態を共有します。

このコンポーネントを段階的に作成する方法を説明しましょう：

モーダルのオープン/クローズ状態を管理するコンテキストを作成することから始めることができます：

モーダルコンポーネントのベースを作成する：

子供を使用して、モーダル内に配置されるコンポーネントをつかんでいることに注意してください。このように使用したい：

ここで、モーダルを開く責任があるトグルコンポーネントを作成する必要があります：

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

最後に、両方のコンポーネントをモーダルコンポーネントに追加でき、準備ができています！ ？

使用法：

結果：

このようにして、モーダルの作成と使用を非常に柔軟で再利用可能にします。 Modal.Toggleはモーダルディスプレイのトリガーを担当し、Modal.Contentはモーダルコンテンツを表示する必要があります。

この構造により、開発者はアプリケーションの特定のニーズに応じてモーダルの動作とコンテンツを簡単にカスタマイズし、コードをよりクリーンにし、より整理します。

他の例

：

など、他のコンテキストで複合コンポーネントを使用することもできます。

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

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

これらの例はすべて柔軟で順応性があり、開発、スケーラビリティ、コンポーネントの使用が容易になります。

エクササイズ

閉じるボタンがコンテンツコンポーネント内に配置されていることに気付きましたが、モーダルの閉鎖を管理するためのコンポーネントがあることは興味深いでしょう。 close のようなものを作成できます。このコンポーネントも実験して追加してみてください！

結論

複合コンポーネントパターンを使用してコンポーネントを作成することが、アプリケーションでどのように役立つかを見てきました。また、それを実装する方法を調査し、このパターンが適合できる場所の例をレビューしました。

複合コンポーネントを使用したコンポーネントの作成を自由に調査して実験してください。賢明に使用し、コンテキストに適用することが理にかなっているかどうかを評価します。

注：この同じコンテンツをReact4nooobsに投稿しました。これは、Reactユニバースの開発者が作成した記事をまとめるBRリポジトリです。チェックアウトする価値があります！