Prop Drilling dans React : définition et exemples

Vous êtes-vous déjà retrouvé dans une situation où vous avez besoin d'obtenir des données dans un composant profondément enfoui dans votre application React ? Vous avez cette information importante à un niveau élevé, mais votre composant est tout en bas de l'arborescence, et maintenant vous êtes obligé de passer des accessoires à travers un tas de couches juste pour y arriver. C'est ce que nous appelons le « forage d'hélices ».

Vous commencez par envoyer les informations en tant qu'accessoires du composant parent à son enfant direct. Ensuite, cet enfant transmet les mêmes informations à son propre enfant, et ainsi de suite, couche par couche, jusqu'à ce que le message atteigne enfin le composant qui en a réellement besoin.

Donc, si vous avez affaire à de nombreux accessoires voyageant dans votre arbre de composants et que vous avez l'impression que c'est un peu exagéré, vous avez probablement affaire à du perçage d'accessoires. Voyons de quoi il s'agit et pourquoi il pourrait être intéressant de rechercher d'autres moyens de gérer vos données.

Qu'est-ce que le forage sur hélice ?

Le forage d'accessoires, parfois appelé « accessoires de thread » ou « chaînage de composants », est la méthode permettant de transmettre des données d'un composant parent à une série de composants enfants imbriqués à l'aide d'accessoires.

Cela se produit lorsque vous devez envoyer un accessoire à travers plusieurs niveaux de composants pour le transmettre à un composant enfant profondément imbriqué qui le nécessite. Chaque élément intermédiaire de la chaîne doit faire avancer l'hélice, même s'il ne l'utilise pas directement.

La métaphore de la classe

Imaginez qu'un enseignant doive partager une information importante avec le dernier élève d'une longue rangée de pupitres. Au lieu de transmettre le message directement, l’enseignant le remet au premier élève. Cet élève le transmet ensuite au suivant, et ainsi de suite, chaque élève de la rangée transmettant le message au suivant jusqu'à ce qu'il atteigne finalement le dernier élève. Dans ce scénario, chaque étudiant joue le rôle d’intermédiaire, assurant que l’information circule de la source jusqu’à son destinataire final. Ce processus reflète le forage d'accessoires en programmation, où les données sont transmises à travers plusieurs couches de composants avant d'atteindre celui qui en a réellement besoin.

Voyons cela dans un exemple de code :

// Parent Component (Teacher)
function Teacher() {
  const messageToLastStudent = "Helo, Last Student!";
  return (
    <FirstStudent message={messageToLastStudent} />
  );
}

// Child Component (First Student)
function FirstStudent({ message }) {
  // The message is passed directly as prop, without be used here.
  return (
    <LastStudent message={message} />
  );
}

// Grandson Component (Last Student)
function LastStudent({ message }) {
  return <p>{message}</p>; // Here the message is finally used.
}

Difficultés avec le forage d'hélices

Le forage d'accessoires est très pratique lorsque l'arborescence des composants de votre application est petite et simple. Il est facile de transmettre des données d’un parent à quelques enfants imbriqués. Mais à mesure que votre application se développe, vous pouvez rencontrer des problèmes :

• Code de complexité : Le forage d'accessoires peut ajouter de la complexité et un passe-partout supplémentaire, en particulier dans les grands arbres de composants. À mesure que les composants sont de plus en plus imbriqués, le suivi du flux des accessoires devient plus difficile et peut rendre la base de code désordonnée.

• Impact sur les performances : Passer des données à plusieurs couches de composants peut avoir un impact négatif sur les performances, surtout si vous travaillez avec de gros volumes de données. En effet, chaque composant de la chaîne doit être restitué à nouveau lorsque les propriétés changent, ce qui peut entraîner un nouveau rendu inutile.

Résoudre les problèmes de forage d'hélices

Mais tout n’est pas perdu ! Nous disposons de moyens efficaces pour éviter le perçage d'hélices et maintenir les performances de l'application :

• API Contexte : L'API Contexte de React permet d'éviter le forage d'accessoires en vous permettant de partager des données directement entre les composants sans passer d'accessoires à chaque niveau de l'arborescence des composants. En utilisant React.createContext et Context.Provider, vous pouvez rendre les données disponibles pour n'importe quel composant du fournisseur, éliminant ainsi le besoin de transmettre des accessoires sur plusieurs couches. Cela simplifie la gestion des données et réduit la complexité de la hiérarchie de vos composants.

• Bibliothèques de gestion de l'État :
  Les bibliothèques de gestion d'état permettent d'éviter le forage d'accessoires en fournissant un magasin centralisé pour les données d'application. Les bibliothèques comme Redux, MobX et Zustand gèrent l'état global, permettant aux composants d'accéder aux données et de les mettre à jour sans passer d'accessoires à chaque niveau. Par exemple, Redux utilise un magasin global et connecte ou utilise des hooks Selector pour connecter les composants à l'état, ce qui simplifie l'accès aux données et réduit le besoin de transmission d'accessoires en profondeur.

• Composants d'ordre supérieur (HOC) :
  Les composants d'ordre supérieur (HOC) permettent d'éviter le perçage d'accessoires en enveloppant les composants avec des fonctionnalités et des données supplémentaires. Un HOC prend un composant et en renvoie un nouveau avec des accessoires injectés ou un comportement amélioré. Cela vous permet de fournir des données ou des fonctionnalités à des composants profondément imbriqués sans passer d'accessoires à travers chaque couche. Par exemple, un HOC peut envelopper un composant pour lui fournir des données d'authentification utilisateur, rationalisant ainsi l'accès aux données et réduisant le passage d'accessoires.

Conclusion

En un mot, le forage d'accessoires peut être une solution rapide pour transmettre des données à travers quelques couches de composants, mais il peut rapidement se transformer en un désordre enchevêtré à mesure que votre application se développe. Bien que cela fonctionne bien pour les petites applications, cela peut entraîner un code encombré et des problèmes de maintenance dans les projets plus importants. Heureusement, il existe des outils tels que l'API de contexte, les bibliothèques de gestion d'état et les composants d'ordre supérieur pour vous aider à éviter le piège du forage d'accessoires et à garder votre base de code propre et gérable. Alors, la prochaine fois que vous aurez affaire à des accessoires, envisagez ces alternatives pour que tout se passe bien !

Construisons l'avenir ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!