À propos de l'utilisation des composants de haut niveau de Vue

Cet article présente principalement l'utilisation de l'exploration des composants de haut niveau de Vue. Maintenant, je le partage avec vous et vous donne une référence.

Les composants d'ordre supérieur (HOC) sont un vocabulaire courant dans l'écosystème React. Le principal moyen de réutiliser du code dans React est d'utiliser des composants d'ordre supérieur, et c'est également une méthode officiellement recommandée. approche. Le principal moyen de réutiliser du code dans Vue est d'utiliser mixins, et le concept de composants d'ordre supérieur est rarement mentionné dans Vue car l'implémentation de composants d'ordre supérieur dans Vue n'est pas comme est aussi simple que dans React parce que les idées de conception de React et Vue sont différentes, mais cela ne signifie pas que les composants d'ordre élevé ne peuvent pas être utilisés dans Vue, mais l'utilisation de composants d'ordre élevé en Vue entraîne Il n'y a pas de changement qualitatif des revenus par rapport à mixins. Cet article explique principalement l'implémentation des Vue composants d'ordre élevé d'un point de vue technique, et l'analysera à la fois du point de vue de React et de Vue.

À partir de React

Au début React également utilisé mixins pour compléter la réutilisation du code Par exemple, afin d'éviter un rendu répété inutile des composants, nous. peut Mélanger PureRenderMixin dans le composant :

const PureRenderMixin = require('react-addons-pure-render-mixin')
const MyComponent = React.createClass({
 mixins: [PureRenderMixin]
})

Plus tard, React a abandonné cette méthode et a utilisé shallowCompare :

const shallowCompare = require('react-addons-shallow-compare')
const Button = React.createClass({
 shouldComponentUpdate: function(nextProps, nextState) {
 return shallowCompare(this, nextProps, nextState);
 }
})

Cela doit être implémenté vous-même dans le composantshouldComponentUpdate méthode, mais le travail spécifique de cette méthode est complété par shallowCompare pour vous, c'est-à-dire une comparaison superficielle.

et versions ultérieures React Afin d'éviter aux développeurs d'avoir à toujours écrire le même morceau de code dans les composants, il est recommandé d'utiliser React.PureComponent Bref, React se démarque de mixins. petit à petit, ils pensent que mixins n'est pas un bon modèle dans l'écosystème React (remarque : il ne dit pas que mixins est mauvais, juste pour l'écosystème React. Les points de vue sont les suivants :

1,

apporte des dépendances implicites mixins

2 Entre

et mixins, il est facile de provoquer des conflits de noms entre mixins et les composants mixins

3. . Puisque

est intrusif, il modifie le composant d'origine, donc modifier mixins équivaut à modifier le composant d'origine. À mesure que la demande augmente, mixins deviendra complexe, conduisant à une complexité boule de neige. mixins

Pour plus de détails, vous pouvez consulter cet article Les mixins considérés comme nocifs. Cependant,

n'est pas une solution miracle. Cela entraîne naturellement ses propres problèmes : l'utilisation de composants ordinaires avec HOC peut faire tout ce que HOC peut faire. render prop

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

jQuery implémente la fonction de couche infinie récursive

Comment implémenter un modèle de chaîne de responsabilité en JavaScript

Utilisez Ajax et Jquery pour réaliser le lien secondaire de la liste déroulante

Problèmes liés au plug-in vue-awesome-swiper

vue Comment utiliser le plug-in better-scroll

Comment obtenir la valeur d'index spécifiée avec jquery

Développement de composants de produits associés dans le framework Vue

La première utilisation de la méthode d'installation du stylet dans vue (tutoriel détaillé)

Comparaison des utilisation de l'express et du koa (tutoriel détaillé)

Cours payants en ligne en vue (tutoriel détaillé)

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!