So verwenden Sie höherwertige Vue-Komponenten

In diesem Artikel wird hauptsächlich die Verwendung von Vue-High-Level-Komponenten vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Komponenten höherer Ordnung (HOC) sind im React-Ökosystem üblich. Die Hauptmethode zur Wiederverwendung von Code in React ist die Verwendung von Komponenten höherer Ordnung, und dies wird auch offiziell empfohlen Ansatz. Die Hauptmethode zur Wiederverwendung von Code in Vue ist die Verwendung von mixins, und das Konzept von Komponenten höherer Ordnung wird in Vue selten erwähnt. Dies liegt daran, dass die Implementierung von Komponenten höherer Ordnung in Vue nicht mit ist so einfach wie in React, da die Designideen von React und Vue unterschiedlich sind. Dies bedeutet jedoch nicht, dass Komponenten höherer Ordnung nicht in Vue verwendet werden können, sondern die Verwendung von Komponenten höherer Ordnung in Vue führt zu einer qualitativen Einkommensveränderung im Vergleich zu mixins. In diesem Artikel wird hauptsächlich die Implementierung von Vue Komponenten höherer Ordnung aus technischer Sicht erläutert und aus den beiden Perspektiven React und Vue analysiert.

Ausgehend von React

Zuerst React auch verwendet mixins, um beispielsweise unnötiges wiederholtes Rendern von Komponenten zu vermeiden kann PureRenderMixin in die Komponente einmischen:

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

Später React wurde diese Methode aufgegeben und shallowCompare verwendet:

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

Dazu müssen Sie die shouldComponentUpdate-Methode selbst in der Komponente implementieren, aber die spezifische Arbeit dieser Methode wird für Sie durch shallowCompare, also einen oberflächlichen Vergleich, erledigt.

und höher React Um zu verhindern, dass Entwickler immer den gleichen Code in Komponenten schreiben, wird empfohlen, React.PureComponent zu verwenden. Kurz gesagt, React löst sich Schritt für Schritt von mixins . Sie denken, dass mixins kein gutes Modell im React-Ökosystem ist (Hinweis: Es heißt nicht, dass mixins schlecht ist, nur für das React-Ökosystem. Die Ansichten sind wie folgt:

1, mixins bringt implizite Abhängigkeiten mit sich

2. Zwischen mixins und mixins kann es leicht zu Namenskonflikten zwischen mixins und Komponenten

3 kommen 🎜> ist aufdringlich, es verändert die ursprüngliche Komponente, daher ist die Änderung von mixins gleichbedeutend mit der Änderung der ursprünglichen Komponente. Wenn die Nachfrage wächst, wird mixins komplex, was zu einer Schneeballkomplexität führt. mixins

Weitere Informationen finden Sie in diesem Artikel: Mixins gelten als schädlich. Allerdings ist

kein Allheilmittel. Es bringt natürlich seine eigenen Probleme mit sich. Der Punkt ist: Die Verwendung gewöhnlicher Komponenten mit HOC kann alles bewirken, was HOC kann. render prop

In diesem Artikel wird nicht allzu viel darüber diskutiert, wer zwischen

und mixins gut oder schlecht ist, genauso wie die Technologie selbst nicht gut oder schlecht ist, sondern nur, ob sie geeignet ist oder nicht. Geht es den beiden Brüdern HOC und React nicht genauso?

Das obige ist der detaillierte Inhalt vonSo verwenden Sie höherwertige Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!