Comment utiliser les composants d'ordre supérieur de Vue

Cet article présente principalement l'utilisation de l'exploration des composants de haut niveau de Vue. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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 vous oblige à implémenter vous-même la méthode shouldComponentUpdate dans le composant, mais le travail spécifique de cette méthode est complété pour vous par shallowCompare, c'est-à-dire une comparaison superficielle.

et versions ultérieures React Afin d'éviter que les développeurs n'écrivent toujours le même code dans les composants, il est recommandé d'utiliser React.PureComponent Bref, React s'éloigne de mixins étape par étape. . 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. 🎜> est intrusif, il modifie le composant d'origine, donc modifier

équivaut à modifier le composant d'origine. À mesure que la demande augmente, mixins deviendra complexe, conduisant à une complexité boule de neige. mixinsmixinsPour 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

peut faire tout ce que HOC peut faire. HOCrender propCet article ne discutera pas trop de qui est bon ou mauvais entre

et

, tout comme la technologie elle-même n'est ni bonne ni mauvaise, seulement si elle est adaptée ou non. N'est-ce pas pareil pour ces deux frères mixins et HOC ?

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!