Quels problèmes les hooks en réaction résolvent-ils ?

Problèmes résolus : 1. Extraire la logique d'état des composants, ce qui résout le problème de la réutilisation difficile de la logique d'état entre les composants ; 2. Diviser les parties interdépendantes des composants en fonctions plus petites, résolvant des problèmes complexes avec les composants ; Réagissez aux fonctionnalités dans des situations hors classe pour résoudre le problème des différences entre les composants de classe et les composants de fonction.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quels problèmes les hooks résolvent-ils dans React

1. Il est difficile de réutiliser la logique d'état entre les composants

React ne fournit pas de moyen de "attacher" des comportements réutilisables aux composants (par exemple, connecter des composants pour stocker) vous peut utiliser des accessoires de rendu et des composants d'ordre supérieur pour résoudre de tels problèmes. Mais de telles solutions nécessitent de réorganiser la structure des composants, ce qui peut s'avérer fastidieux et rendre le code difficile à comprendre. Les composants composés de fournisseurs, de consommateurs, de composants d'ordre supérieur, d'accessoires de rendu et d'autres couches d'abstraction peuvent créer un « enfer imbriqué ». Bien qu'il soit possible de les filtrer dans DevTools, cela illustre un problème plus profond : React doit fournir une meilleure méthode native pour la logique d'état partagé.

Vous pouvez utiliser des Hooks pour extraire la logique d'état des composants, afin que ces logiques puissent être testées individuellement et réutilisées. Les hooks nous permettent de réutiliser la logique d'état sans modifier la structure des composants. Cela facilite le partage de Hooks entre composants ou au sein de la communauté.

2. Les composants complexes deviennent difficiles à comprendre

Dans les composants, chaque cycle de vie contient souvent une logique non pertinente. Par exemple, les composants obtiennent souvent des données dans composantDidMount et composantDidUpdate. Cependant, le même composantDidMount peut également contenir de nombreuses autres logiques, telles que la configuration d'écouteurs d'événements, qui doivent être effacées ultérieurement dans composantWillUnmount. Le code lié et qui doit être modifié est divisé, tandis que le code totalement indépendant est combiné dans la même méthode. Cela peut facilement créer des bugs et conduire à des incohérences logiques.

Dans la plupart des cas, il n'est pas possible de diviser les composants en granularités plus petites car la logique d'état est partout. Cela pose également certains défis en matière de tests. En même temps, c'est l'une des raisons pour lesquelles de nombreuses personnes utilisent React avec une bibliothèque de gestion d'état. Cependant, cela introduit souvent de nombreux concepts abstraits et vous oblige à basculer entre différents fichiers, ce qui rend la réutilisation plus difficile.

Pour résoudre ce problème, Hook divise les parties interdépendantes du composant en fonctions plus petites (telles que la définition d'abonnements ou la demande de données), plutôt que de forcer leur division en fonction du cycle de vie. Vous pouvez également utiliser des réducteurs pour gérer l'état interne d'un composant afin de le rendre plus prévisible.

3. Classes incompréhensibles

En plus des difficultés rencontrées dans la réutilisation du code et la gestion du code, les classes sont un frein majeur à l'apprentissage de React. Nous devons comprendre comment cela fonctionne en JavaScript, qui est très différent des autres langages. N'oubliez pas de lier les gestionnaires d'événements. Il n’existe pas de proposition de syntaxe stable et le code est très redondant. Tout le monde peut très bien comprendre les accessoires, l'état et le flux de données descendant, mais ils sont perdus pour les cours. Même parmi les développeurs React expérimentés, il existe des désaccords sur les différences entre les composants de fonction et les composants de classe, et même sur les scénarios d'utilisation des deux composants.

Pour résoudre ces problèmes, Hook vous permet d'utiliser plus de fonctionnalités React sans cours. Conceptuellement, les composants React ont toujours ressemblé davantage à des fonctions. Les Hooks englobent des fonctions sans sacrifier les principes spirituels de React. Hook fournit une solution au problème sans apprendre des techniques complexes de programmation fonctionnelle ou réactive

Apprentissage recommandé : "Tutoriel vidéo React"

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!