Le modèle HOC (Higher Order Component) est très populaire auprès des développeurs React. Mais les développeurs de Vue le contournent en quelque sorte. Très vain. Essayons de le comprendre.
Qu'est-ce qu'un HOC?
Un composant d'ordre supérieur (HOC) est une fonction qui prend un composant existant et renvoie un autre composant qui encapsule le composant d'origine, ajoutant une nouvelle logique.
HOC vs mixins
Beaucoup se demanderont peut-être pourquoi utiliser le HOC en présence d'impuretés? Ils ajoutent également de nouvelles fonctionnalités aux composants. Que peut HOC dont les impuretés ne savent pas?
Tout d'abord, rappelez-vous quelles sont les impuretés dans Vue (définition tirée de la documentation de Vue):
Les mixins sont un outil de réutilisation de code flexible dans les composants Vue. L'objet impureté peut contenir n'importe quelle option de composant. Lorsqu'une impureté est utilisée par un composant, toutes les options d'impureté sont «mélangées» avec les propres options du composant.
Il semble que le but des impuretés et du HOC soit le même - ils vous permettent d'étendre la fonctionnalité de différents composants. Et à l'extérieur (en utilisant le dernier composant), il peut même se ressembler.
Mais la différence réside dans le principe même du HOC et des impuretés. Les impuretés sont «mélangées» lors de la déclaration d'un composant - toute instance de composant les contiendra.
En utilisant HOC, nous encapsulons une instance d'un composant ne modifiant pas le composant lui-même, mais en créant un nouveau là où il est nécessaire. Cela signifie que nous n'affectons que le morceau de code où nous l'utilisons. Pour cette raison, nous réduisons la cohérence du code, le rendons plus lisible et flexible.
HOC est un peu comme un modèle de conception de décorateur .
Création HOC
Eh bien. Jetons un œil à tout cela avec un exemple.
Nous avons donc un composant bouton:
Après un certain temps, nous avons soudainement dû enregistrer la pression de certains boutons (mais pas tous). Nous pouvons le faire grâce aux impuretés en mélangeant le code de connexion au composant bouton, puis, au bon endroit, activer ou désactiver la journalisation via une propriété de composant. Mais d'accord, ce n'est pas très pratique? Et s'il y a beaucoup de telles fonctionnalités? Une erreur - et tous les boutons peuvent cesser de fonctionner correctement.
Dans ce cas, HOC serait une excellente solution. Nous enveloppons simplement le bouton à certains endroits avec le HOC correspondant.
Il est temps d'apprendre à connaître le HOC dans la pratique.
Étape 1. Créez une fonction HOC
Nous nous souvenons que HOC est une fonction qui prend un composant en entrée et en renvoie un autre. Créons donc une telle fonction. Appelons-le withLoggerButton.
Il est habituel de commencer à nommer les fonctions HOC avec - c'est une sorte de marque d'identification des HOC.
Le résultat est une fonction qui prend un composant Button en entrée, puis renvoie un nouveau composant. Dans la fonction de rendu, nous utilisons le composant d'origine, mais avec un changement - nous ajoutons un événement pour cliquer sur le nœud DOM, la sortie de l'inscription cliquée dans la console.
Si vous ne comprenez pas ce qui se passe ici, ce que sont h et le contexte, lisez d'abord la documentation vue sur le fonctionnement des fonctions de rendu.
Dans l'exemple actuel, j'ai utilisé le composant fonctionnel, car Je n'ai pas besoin de condition. Personne ne vous interdit de retourner un composant régulier au lieu d'un composant fonctionnel, mais n'oubliez pas que les composants fonctionnels sont beaucoup plus rapides que les composants ordinaires.
Étape 2. Utilisation de HOC
Maintenant, en utilisant la fonction résultante, nous créons simplement un nouveau composant.
La seule chose qui reste est de connecter le composant reçu où nous avons besoin de la journalisation des clics.
Dernier exemple:
La composition
Tout cela est certainement génial, mais que faire si vous avez besoin d'un bouton qui non seulement se connecte, mais effectue également une autre action?
Tout est simple. Nous transformons un HOC en un autre. Nous pouvons mélanger autant de HOC que nous le souhaitons.
De plus, pour la composition, il existe de nombreuses fonctions et bibliothèques prêtes à l'emploi qui facilitent la composition.
HOC est un modèle simple mais très puissant. Il est utilisé à la base de nombreuses bibliothèques. Ce n'est pas une solution miracle ou un remplacement complet des mixins et du mécanisme d'hérédité des composants. Utilisez-le judicieusement en combinaison avec d'autres modèles et vos applications Vue deviendront vraiment flexibles.
Poste croisé