Composants composés dans React —

Les composants composés aident les développeurs à créer des API plus expressives et flexibles pour partager l'état et la logique au sein des composants. Ce tutoriel explique comment cela peut être réalisé à l'aide de l'API Context et de React pour créer des composants à l'aide de ce modèle avancé.

Remarque : Afin de pouvoir suivre, vous allez besoin d'une compréhension de base de React et du fonctionnement de l'API de contexte. rendre le contrôle de ses parties variables à l'utilisateur externe.

À partir de la définition ci-dessus, notez les mots-clés : state et behavior. Cela nous aide à comprendre que les composants composés traitent de l'état (c'est-à-dire comment l'état se comporte à travers un composant qui est entouré par un utilisateur externe étant le parent du composant).

L'objectif des composants composés est de fournir une API plus expressive et flexible. pour la communication entre les composants parent et enfant.

Pensez-y comme les balises et en HTML :

Volvo Mercedes Audi

Le select[Labalise fonctionne avec la balise option qui est utilisée pour un menu déroulant permettant de sélectionner des éléments en HTML. Ici, le gère l'état de l'interface utilisateur, puis les éléments sont configurés sur la façon dont le devrait fonctionner. Les composants composés dans React sont utilisés pour créer un composant d'interface utilisateur déclaratif qui permet d'éviter le forage d'accessoires.

Le forage d'accessoires transmet les accessoires à plusieurs composants enfants. C'est aussi ce qu'ils appellent une « odeur de code ». Le pire du forage d'accessoires est que lorsque le composant parent est re-rendu, les composants enfants seront également re-rendus et provoqueront un effet domino sur le composant. Une bonne solution serait d'utiliser l'API React Context que nous examinerons également plus tard.

Applying Compound Components In React

Ceci La section explique les packages que nous pouvons utiliser dans notre application et qui adoptent le modèle de composant composé des composants de construction dans React. Cet exemple est un composant Menu du package d'interface utilisateur @reach.

import {
  Menu,
  Liste de menus,
  Bouton de menu,
  Élément du menu,
  Éléments de menu,
  Menu Popover,
  Lien de menu,
} de "@reach/menu-button" ;
import "@reach/menu-button/styles.css";

Voici une façon d'utiliser le composant Menu :

function Example() {
  revenir (
    
      Actions
      
        Télécharger
        Afficher
      
    
  );
}

L'exemple de code ci-dessus est l'une des implémentations de composants composés dans lesquels vous pouvez voir que le MenuMenuButton,MenuListMenuItem et MenuLink ont tous été importés de @reach/menu-button. Au lieu d'exporter un seul composant, ReachUI exporte un composant parent qui est Menu accompagnant ses composants enfants qui sont MenuButtonMenuListMenuItem et le MenuLink.

Quand devez-vous utiliser des composants composés ?

En tant que développeur React, vous devez utiliser des composants composés lorsque vous souhaitez :

• Résoudre les problèmes liés à la construction de composants réutilisables ;
• Développement de composants hautement cohésifs avec un couplage minimal ;
• Meilleurs moyens de partager la logique entre les composants.

Avantages et inconvénients des composants composés

Un composant composé est un modèle React génial à ajouter à votre boîte à outils de développeur React. Dans cette section, je vais exposer les avantages et les inconvénients de l'utilisation de composants composés et ce que j'ai appris de la construction de composants à l'aide de ce modèle de développement. le composant parent et communiquer cela en interne à tous les composants enfants permet une division claire des responsabilités. en utilisant le modèle de composant composé.

Inconvénients

L'un des principaux inconvénients de la construction de composants dans React avec le modèle de composant composé est que seuls les enfants directs du composant parent auront accès aux accessoires, ce qui signifie que nous ne pouvons envelopper aucun de ces composants dans un autre composant.

export default function FlyoutMenu() {
  revenir (
    
      {/* Cela casse */}
      

        
        
          Modifier
          Supprimer
        
      
    
  );
}

Une solution à ce problème serait d'utiliser le modèle de composant composé flexible pour partager implicitement l'état à l'aide de l'API React.createContext.

L'API de contexte permet de transmettre l'état React via des composants imbriqués. lors de la construction en utilisant le modèle de composant composé des composants de construction dans React. Ceci est possible car context fournit un moyen de transmettre des données dans l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau. L'utilisation de l'API de contexte offre une grande flexibilité à l'utilisateur final.

Maintenance des composants composés dans React

Les composants composés offrent un moyen plus flexible de partager l'état dans les applications React, ce qui permet d'utiliser des composants composés dans vos applications React facilite la maintenance et le débogage de vos applications.

Créer une démo

Dans cet article, nous allons créer un composant accordéon dans React à l'aide du modèle de composants composés. Le composant que nous allons construire dans ce didacticiel serait un composant accordéon sur mesure qui est flexible et partage l'état au sein du composant à l'aide de l'API de contexte.

Allons-y !

D'abord de tous, créons une application React en utilisant ce qui suit :

npx create-react-app accordionComponent
cd accordéonComposant
npm start

ou

yarn create react-app accordionComponent
cd accordéonComposant
thread start

Les commandes ci-dessus créent une application React, modifiez le répertoire en projet React et démarrez le serveur de développement.

Remarque : Dans ce didacticiel, nous utiliserons styled-components pour aider à styliser nos composants.

Utilisez la commande ci-dessous pour installer styled-components:

yarn add styled-components

ou[19659063]npm install –save styled-components

Dans le dossier srccréez un nouveau dossier appelé components. C'est là que tous nos composants vivraient. Dans le dossier componentscréez deux nouveaux fichiers : accordion.js et accordion.styles.js.

Le accordion.styles.js Le fichier contient notre style pour le composant Accordion (notre style a été fait à l'aide de styled-components).

import stylisé à partir de "styled-components" ;

export const Conteneur = styled.div`
  affichage : flexible ;
  bordure inférieure : 8px solide #222 ;
`;

Ci-dessus est un exemple de composants de style utilisant la bibliothèque css-in-js appelée styled-components.

Dans accordion.styles.js ajoutez les styles restants :

export const Frame = styled.div`
  marge inférieure : 40 px ;
`;
export const Inner = styled.div`
  affichage : flexible ;
  rembourrage : 70px 45px ;
  flex-direction : colonne ;
  largeur maximale : 815 px ;
  marge : automatique ;
`;
export const Titre = styled.h1`
  taille de la police : 40 px ;
  hauteur de ligne : 1.1 ;
  marge supérieure : 0 ;
  marge inférieure : 8px ;
  la couleur noire;
  text-align : centre ;
`;
export const Item = styled.div`
  Couleur blanche;
  marge : automatique ;
  marge inférieure : 10 px ;
  largeur maximale : 728 px ;
  largeur : 100 % ;
  &:premier du type {
    marge supérieure : 3em ;
  }
  &:dernier de type {
    marge inférieure : 0 ;
  }
`;
export const En-tête = styled.div`
  affichage : flexible ;
  flex-direction : espace-entre ;
  curseur : pointeur ;
  marge inférieure : 1px ;
  taille de la police : 26 px ;
  font-weight : normal ;
  arrière-plan : #303030 ;
  rembourrage : 0.8em 1.2em 0.8em 1.2em ;
  sélection par l'utilisateur : aucun ;
  align-items: center;
  img {
    filtre : luminosité(0) inversion(1) ;
    largeur : 24px ;
    sélection par l'utilisateur : aucun ;
    @media (largeur max : 600px) {
      largeur : 16px ;
    }
  }
`;
export const Body = styled.div`
  taille de la police : 26px ;
  font-weight : normal ;
  hauteur de ligne : normale ;
  arrière-plan : #303030 ;
  espace blanc : pré-emballage ;
  sélection par l'utilisateur : aucun ;
  débordement caché;
  &.fermé {
    hauteur max : 0 ;
    débordement caché;
    transition : hauteur max. 0,25 ms cube-bézier (0,5, 0, 0,1, 1 );
  }
  &.ouvert {
    hauteur maximale : 0px ;
    transition : hauteur max. 0,25 ms cube-bézier (0,5, 0, 0,1, 1 );
  }
  envergure {
    bloc de visualisation;
    rembourrage : 0,8 em 2,2 em 0,8 em 1,2 em ;
  }
`;

Commençons à construire notre composant accordéon. Dans le fichier accordion.jsajoutons le code suivant :

import React, { useState, useContext, createContext } from "react" ;
importer {
  Récipient,
  Intérieur,
  Article,
  Corps,
  Cadre,
  Titre,
  Entête
} de "./accordion.styles";

Ci-dessus, nous importons les hooks useStateuseContext et createContext qui nous aideront à construire notre composant accordéon utilisant des composants composés.

La documentation React explique que le context permet de transmettre des données à travers l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau.

En regardant ce que nous avons importé précédemment dans notre fichier accordion.jsvous remarquerez que nous avons également importé nos styles en tant que composants, ce qui nous aidera à créer nos composants plus rapidement.

Nous allons continuer. et créez notre contexte pour le composant qui partagera les données avec les composants qui en ont besoin :

const ToggleContext = createContext();
exporter la fonction par défaut Accordion({ children, ...restProps }) {
  revenir (
    
      {enfants}
    
  );
}

Les composants Container et Inner de l'extrait de code ci-dessus proviennent de notre fichier ./accordion.styles.js dans lequel nous avons créé des styles pour nos composants à l'aide de la bibliothèque styled-components (de la bibliothèque css-in-js). Le composant Container abrite l'ensemble Accordion que nous construisons en utilisant des composants composés.

Ici, nous créons un objet de contexte en utilisant la méthode createContext()Ainsi, lorsque React rend un composant qui s'abonne à cet objet Context, il lira la valeur de contexte actuelle à partir du fournisseur correspondant le plus proche au-dessus de lui dans l'arborescence.

Ensuite, nous créons également notre composant de base qui est l'Accordéon ; il prend les enfants et tout restProps. Il s'agit de notre composant parent qui héberge les composants enfants de l'Accordéon.

Créons d'autres composants enfants dans le fichier accordion.js :

Accordion.Title = function AccordionTitle({ children, .. .restProps }) {
  retour  ;
} ;
Accordion.Frame = function AccordionFrame({ children, ...restProps }) {
  retour {enfants} ;
};

Remarquez le . après le composant Accordéon parent ; ceci est utilisé pour connecter le composant enfant à son composant parent.

Continuons. Ajoutez maintenant ce qui suit au fichier accordion.js :

Accordion.Item = function AccordionItem({ children, ...restProps }) {
  const [toggleShow, setToggleShow] = useState(true);
  revenir (
    
      {enfants}
    
  );
} ;
Accordion.ItemHeader = function AccordionHeader({ children, ...restProps }) {
  const { isShown, toggleIsShown } = useContext(ToggleContext);
  revenir (
    
 toggleIsShown(!isShown)} {...restProps}>
      {enfants}
    
  );
} ;
Accordion.Body = function AccordionHeader({ children, ...restProps }) {
  const { isShown } = useContext(ToggleContext);
  revenir (
    
      {enfants}
    
  );
};

Nous créons donc ici un composant BodyHeader et Item qui sont tous des enfants du composant parent Accordion . C'est là que ça peut commencer à devenir délicat. Notez également que chaque composant enfant créé ici reçoit également un accessoire children et restprops.

À partir du composant enfant Itemnous avons initialisé notre état en utilisant le Hook useState et définissez-le sur true. Ensuite, rappelez-vous également que nous avons créé un ToggleContext au niveau supérieur du fichier accordion.js qui est un Context Objectet lorsque React rend un composant qui s'abonne à cet objet Context, il lira la valeur de contexte actuelle à partir du fournisseur correspondant le plus proche au-dessus de lui dans l'arborescence.

Chaque objet Context est livré avec un composant React Provider qui permet aux composants consommateurs de s'abonner aux changements de contexte.

Le composant provider accepte une prop value à transmettre aux composants consommateurs descendants de ce fournisseur, et ici nous passons la valeur d'état actuelle qui est le toggleShow et méthode pour définir la valeur de l'état actuel setToggleShow. Ils sont la valeur qui détermine comment notre objet de contexte partagera l'état autour de notre composant sans forage d'accessoires.

Ensuite, dans notre header composant enfant du Accordionnous détruisons les valeurs de l'objet de contexte, puis en changeant l'état actuel du toggleShow au clic. Donc, ce que nous essayons de faire est de masquer ou d'afficher notre accordéon lorsque l'on clique sur l'en-tête.

Dans notre composant Accordion.Bodynous détruisons également le toggleShow qui est l'état actuel du composant, puis en fonction de la valeur de toggleShownous pouvons soit masquer le corps, soit afficher le contenu du composant Accordion.Body.

Voilà donc tout pour notre fichier accordion.js.

C'est maintenant ici que nous voyons comment tout ce que nous avons appris sur Context et Compound components se combine. Mais avant cela, créons un nouveau fichier appelé data.json et collons-y le contenu ci-dessous :

[
  {
    "id": 1,
    "header": "What is Netflix?",
    "body": "Netflix is a streaming service that offers a wide variety of award-winning TV programs, films, anime, documentaries and more – on thousands of internet-connected devices.nnYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There’s always something new to discover, and new TV programs and films are added every week!"
  },
  {
    "id": 2,
    "header": "How much does Netflix cost?",
    "body": "Watch Netflix on your smartphone, tablet, smart TV, laptop or streaming device, all for one low fixed monthly fee. Plans start from £5.99 a month. No extra costs or contracts."
  },
  {
    "id": 3,
    "header": "Where can I watch?",
    "body": "Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.nnYou can also download your favorite programs with the iOS, Android, or Windows 10 app. Use downloads to watch while you’re on the go and without an internet connection. Take Netflix with you anywhere."
  },
  {
    "id": 4,
    "header": "How do I cancel?",
    "body": "Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online with two clicks. There are no cancellation fees – start or stop your account at any time."
  },
  {
    "id": 5,
    "header": "What can I watch on Netflix?",
    "body": "Netflix has an extensive library of feature films, documentaries, TV programs, anime, award-winning Netflix originals, and more. Watch as much as you want, any time you want."
  }
]

Ce sont les données avec lesquelles nous allons travailler afin de tester notre composant accordéon.

Alors, continuons. Nous avons presque terminé et je pense que vous avez beaucoup appris en suivant cet article.

Dans cette section, nous allons rassembler tout ce sur quoi nous avons travaillé et en apprendre davantage sur les composants composés pour pouvoir l'utiliser dans notre App.js pour utiliser la fonction Array.map pour afficher les données que nous avons déjà sur la page Web. Notez également qu'il n'y a pas eu d'utilisation d'état dans App.js ; tout ce que nous avons fait était de transmettre les données aux composants spécifiques et l'API de contexte s'est occupée de tout le reste.

Passons maintenant à la dernière partie. Dans votre App.jsprocédez comme suit :

import React from "react" ;
importer Accordéon depuis "./components/Accordion" ;
importer faqData de "./data" ;
exporter la fonction par défaut App() {
  revenir (
    
      Foire aux questions
      
        {faqData.map((item) => (
          
            {item.header}
            {item.body}
          
        ))}
      
    
  );
}

Dans votre fichier App.jsnous avons importé notre accordéon de composant composé à partir du chemin du fichier, puis avons également importé nos données factices, mappées via les données factices afin d'obtenir les éléments individuels dans nos données fichier, puis les a affichés conformément au composant respectif, vous remarquerez également que tout ce que nous avions à faire était de passer les enfants au composant respectif, l'API de contexte s'occupe de s'assurer qu'il atteint le bon composant et qu'il n'y avait pas de prop perçage.

Voici à quoi devrait ressembler notre produit final :

Alternative aux composants composés

Une alternative à l'utilisation de composants composés serait d'utiliser l'API Render Props. Le terme Render Prop dans React fait référence à une technique de partage de code entre les composants React à l'aide d'une prop dont la valeur est une fonction. Un composant avec un accessoire de rendu prend une fonction qui renvoie un élément React et l'appelle au lieu d'implémenter sa propre logique de rendu. ont des composants imbriqués les uns dans les autres. C'est l'avantage d'utiliser Context pour partager des données entre les composants par rapport à l'utilisation de la méthode render prop.

Conclusion

Dans cet article, nous avons découvert l'un des modèles avancés de React qui est le modèle de composant composé. C'est une méthode géniale pour créer des composants réutilisables dans React en utilisant le modèle de composant composé pour créer votre composant vous offre beaucoup de flexibilité dans votre composant. Vous pouvez toujours choisir d'utiliser Render Prop si la flexibilité n'est pas ce dont votre composant a besoin pour le moment.

Les composants composés sont les plus utiles dans la construction de systèmes de conception. Nous avons également suivi le processus de partage de l'état au sein des composants à l'aide de l'API Context.

• Le code de ce didacticiel se trouve sur Codesandbox.

(ks, vf, yk, il)