Introduction

L'un des concepts les plus utiles et les plus utilisés dans le monde de React est les modèles de conception, car ils aident à garder le code évolutif et à donner un sens supplémentaire aux composants que nous créons.

Il existe différents modèles, et dans cet article, nous discuterons des composants composés , un modèle avancé qui est particulièrement utile pour créer des interfaces flexibles et composables.

Qu'est-ce que les composants composés?

Composants composés est un modèle avancé dans React. Son objectif est de créer une conception plus flexible en permettant le partage de l'état et de la logique entre un groupe de composants. De cette façon, la communication entre le composant parent et les composants enfants peut être réalisée de manière flexible.

Les composants travaillent ensemble pour atteindre certains comportements sans créer des arbres d'accessoires complexes ou une logique trop compliquée qui serait difficile à refacter ou à comprendre à l'avenir.

Ce modèle aide à éliminer le forage des accessoires, où nous transmettons un grand nombre d'accessoires à travers plusieurs couches de composants. Le forage des accessoires peut être problématique, car il peut provoquer des redevances inutiles à chaque fois que l'état est mis à jour, car chaque changement d'état mettra à jour tous les composants enfants.

Un exemple de composants composés peut être vu dans la structure html de sélections et des balises d'option:

L'élément Select fonctionne comme le gestionnaire d'état de l'interface, tandis que les éléments d'option configurent le fonctionnement du composant sélectionné.

Exemple utilisant des composants composés

Dans cet exemple, nous créerons un modal, qui est divisé en deux composants composés: basculer et contenu. Ils partageront l'état ouvert / proche du modal.

Parcourons comment créer ce composant étape par étape:

Nous pouvons commencer par créer le contexte qui gérera l'état ouvert / ferme du modal:

Création de la base du composant modal:

Notez que nous utilisons des enfants pour saisir les composants qui seront placés à l'intérieur du modal. Nous voulons l'utiliser comme ceci:

Nous devons maintenant créer le composant de bascule, qui sera responsable de l'ouverture du modal:

Nous avons également besoin d'un composant de contenu qui sera responsable de l'affichage du contenu du modal:

Enfin, nous pouvons ajouter les deux composants à notre composant modal, et il est prêt à partir! ?

Usage:

Résultat:

De cette façon, nous faisons de la création et de l'utilisation de modaux extrêmement flexibles et réutilisables. Modal.toggle est responsable du déclenchement de l'affichage modal, tandis que modal.Content doit afficher le contenu modal.

Cette structure permet aux développeurs de personnaliser facilement le comportement et le contenu des modaux en fonction des besoins spécifiques de leurs applications, ce qui rend le code plus propre et plus organisé.

Autres exemples

Nous pouvons également utiliser des composants composés dans d'autres contextes, tels que:

Composants de l'accordéon:

Composants de menu:

Tous ces exemples sont flexibles et adaptables, ce qui facilite le développement, l'évolutivité et l'utilisation des composants.

Exercice

Nous avons remarqué que le bouton de fermeture était placé dans le composant de contenu, mais il serait intéressant d'avoir un composant dédié à la gestion de la fermeture du modal. Vous pouvez créer quelque chose comme Close . Essayez également d'expérimenter et d'ajouter ce composant!

Conclusion

Nous avons vu comment l'écriture de composants utilisant le modèle composé des composants peut être utile dans nos applications. Nous avons également exploré comment l'implémenter et examiné des exemples de l'endroit où ce modèle peut s'adapter.

N'hésitez pas à explorer et à expérimenter la création de composants à l'aide de composants composés. Utilisez-le à bon escient et évaluez s'il est logique de s'appliquer dans votre contexte, comme s'il n'était pas bien implémenté, cela pourrait finir par être plus un obstacle qu'une aide.

Remarque: J'ai publié ce même contenu sur React4Noobs, un référentiel BR qui rassemble des articles créés par les développeurs dans l'univers React. Cela vaut la peine de vérifier!