Stratégie de gestion de l'État différente.

React Prop Drilling explore les données, du composant parent au composant enfant. Il s'agit de transmettre les données qui devraient être accessibles à tous les niveaux.

Les données sont transmises au composant enfant, qui affiche ou récupère les données à l'aide de différents protocoles. Nous effectuons beaucoup de mise en cache pour éviter un nouveau rendu du composant React, mais si notre application est complexe et profondément imbriquée. Le rendu se produira chaque fois que les accessoires seront mis à jour.

Comprenons le forage d'hélices, mais essayons de

Par exemple, si vous avez une hiérarchie de composants comme celle-ci :

ParentComponent
  ├── IntermediateComponent1
  │     └── IntermediateComponent2
  │           └── TargetComponent

Si ParentComponent possède des données dont TargetComponent a besoin, l'exploration des accessoires implique de transmettre ces données de ParentComponent via IntermediateComponent1 et IntermediateComponent2 avant qu'elles n'atteignent finalement TargetComponent. Chaque composant intermédiaire reçoit les données sous forme d'accessoires et les transmet au niveau suivant.

function App() {

  const [user, setUser] = useState({ name: "John Doe" });

return (




  );

}

function ParentComponent({ user }) {

  return (




  );

}

function Child({ user }) {

  return (




  );

}

function Grandchild({ user }) {

  return 
Hello, {user.name}!
;

}

Forage d'hélices : bon ou mauvais ?

La réponse à cette question n'est pas un simple oui/non, cela dépend totalement de votre cas d'utilisation. Il existe diverses facteurs tels que le contexte et l'échelle de votre application.

• Petit projet : pour les petits projets qui sont principalement des sites Web de base, comme un portfolio, une page de produit de base, vous pouvez utiliser le perçage d'accessoires. Il ne sert à rien de configurer l'intégralité de l'outil de gestion d'état comme mobx ou Redux pour de telles applications.

• La gestion de l'État a introduit une complexité inutile dans le projet, mais cela peut être facilement évité en utilisant le forage d'accessoires.

Utilisation du forage d'hélices dans React.

1. *Partage de données
   * Le forage accessoire est couramment utilisé lorsqu'un composant enfant profondément imbriqué a besoin d'accéder aux données ou aux fonctions d'un composant parent. Par exemple, si un composant parent contient l'état de l'application ou une fonction qui met à jour l'état, et qu'un composant enfant doit accéder ou modifier cet état, l'exploration des accessoires est un moyen de rendre ces données ou cette fonction accessibles.

2. *Flux de données explicite
   * L'un des principaux avantages du forage sur hélice est qu'il maintient un flux de données clair et explicite au sein de l'application. En passant des accessoires à travers chaque composant, il est toujours évident d'où viennent les données et comment elles sont transmises, ce qui peut simplifier le débogage et la compréhension du code.

3. *La simplicité dans les petites applications
   * Dans les applications plus petites ou lorsque la hiérarchie des composants est relativement superficielle, le perçage d'accessoires est une solution simple qui ne nécessite pas d'outils ou de bibliothèques supplémentaires. Il permet aux développeurs de gérer l'état et de transmettre des données sans introduire de complexité.

Alternative au forage d'hélices dans React.

1. API de contexte de réaction

• Qu'est-ce que c'est : Une fonctionnalité intégrée dans React qui vous permet de partager des données dans l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau.

• Quand utiliser : Convient au partage de données globales telles que des thèmes, le statut d'authentification de l'utilisateur ou les paramètres régionaux.

• Vous pouvez utiliser l'API Context pour éviter de transmettre des accessoires à chaque niveau de l'arborescence des composants. Le contexte vous permet de créer un état global accessible par n'importe quel composant, évitant ainsi la nécessité de transmettre manuellement les accessoires à chaque niveau.

Avantages :

• Réduit le besoin de perçage d'accessoires.

• Simplifie le partage de données entre plusieurs composants.

Inconvénients :

• Peut introduire des dépendances cachées, rendant les composants moins réutilisables.

• Une utilisation excessive peut rendre le débogage plus complexe.

2. Bibliothèques de gestion d'état (par exemple, Redux, MobX)

• Ce qu'ils sont : Bibliothèques externes qui fournissent un moyen structuré de gérer et de partager l'état des applications.

• Quand l'utiliser : Idéal pour les applications à grande échelle où la gestion de l'état est complexe et nécessite une structure prévisible.

Avantages :

• Centralise la gestion de l'état.

• Facilite le débogage et les tests.

• Prend en charge le débogage des voyages dans le temps et d'autres fonctionnalités avancées.

Inconvénients :

• Ajoute une complexité et une courbe d'apprentissage supplémentaires.

• Peut être excessif pour des applications simples.

3. Crochets personnalisés

• Ce qu'ils sont : Fonctions réutilisables dans React qui encapsulent la logique avec état, vous permettant de partager facilement la logique entre les composants.

• Quand utiliser : Utile pour partager la logique et le comportement avec état sans perçage d'accessoires.

Avantages :

• Favorise la réutilisation et la propreté du code.

• Garde les composants concis et ciblés.

Inconvénients :

• Peut ne pas convenir à tous les scénarios de partage de données.

• Nécessite une compréhension de l'API React Hooks.

4. Composition et composants d'ordre supérieur

• Ce qu'ils sont : Des modèles qui vous permettent d'améliorer les composants en les enveloppant avec des fonctionnalités supplémentaires.

• Quand l'utiliser : Utile pour injecter des accessoires et des comportements dans des composants sans modifier leur structure.

Avantages :

• Encourage le code réutilisable et composable.

• Peut éliminer certains cas de perçage d'accessoires.

Inconvénients :

• Peut rendre l'arborescence des composants plus complexe.

• Peut être plus difficile à retracer le flux de données par rapport à la transmission explicite d'accessoires.

Inconvénients des accessoires forant dans React

1. Lisibilité du code : Le perçage des accessoires peut rendre les composants plus difficiles à comprendre car vous devez tracer l'accessoire à travers plusieurs couches de l'arborescence des composants.

2. Maintenance : À mesure que votre application se développe, la gestion et la refactorisation de ce code deviennent difficiles. Changer la structure des accessoires peut devenir fastidieux si de nombreux composants sont impliqués.

3. Performances : Des rendus inutiles peuvent se produire si les accessoires changent à un niveau supérieur et sont transmis sur plusieurs couches, même si seul le composant profondément imbriqué a besoin des données.

4. Problèmes d'évolutivité : À mesure que les applications se développent et que les arborescences de composants deviennent plus profondes, le forage d'accessoires peut devenir fastidieux et difficile à gérer. Cela peut conduire à un code verbeux et rendre la maintenance difficile.

5. Accessoires redondants : Les composants intermédiaires sont obligés de recevoir et de transmettre des accessoires qu'ils n'utilisent pas, ce qui entraîne un couplage inutile et une confusion potentielle.

6. Difficulté de maintenance : La mise à jour ou la refactorisation des composants peut devenir sujette aux erreurs, car les modifications apportées à la structure des données peuvent nécessiter des mises à jour sur plusieurs couches de composants.

Pensées finales

J'espère que vous devez comprendre le forage d'accessoires dans React, une technique permettant de transmettre des données à travers plusieurs couches de composants. Bien que le forage d'hélices fonctionne bien pour les petites applications avec des structures de composants simples, il peut devenir fastidieux et difficile à gérer à mesure que les applications se développent.

Les défis incluent une diminution de la lisibilité du code, des difficultés de maintenance et des problèmes de performances dus à des rendus inutiles. Pour surmonter ces limitations, des alternatives telles que l'API React Context, les bibliothèques de gestion d'état (par exemple, Redux, MobX) et les hooks personnalisés sont suggérées, bien qu'elles présentent leurs propres complexités.

Essentiellement, même si le forage d'hélices est utile dans certains scénarios, il est important d'envisager des solutions plus évolutives à mesure que votre projet se développe.

À propos de l'auteur

Apoorv est un développeur de logiciels chevronné. Vous pouvez vous connecter sur **les réseaux sociaux.
Abonnez-vous à la newsletter d'Apoorv pour le dernier contenu organisé.