Informationen zur Verwendung von Vue-High-Level-Komponenten

In diesem Artikel wird hauptsächlich die Verwendung von Vue-High-Level-Komponenten vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

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 keiner 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);
 }
})

Dies erfordert, dass Sie die shouldComponentUpdate-Methode selbst in der Komponente implementieren . Es ist nur so, dass shallowCompare Ihnen bei der spezifischen Arbeit dieser Methode hilft, also ein oberflächlicher Vergleich.

und später React Um zu vermeiden, dass Entwickler immer den gleichen Code in Komponenten schreiben müssen, wird empfohlen, React.PureComponent zu verwenden. Kurz gesagt, React löst sich von mixins Schritt für Schritt denken sie, 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 . Da mixins aufdringlich ist, ändert es die ursprüngliche Komponente, sodass das Ändern von mixins dem Ändern der ursprünglichen Komponente entspricht. Mit zunehmender Nachfrage wird mixins komplex, was zu einer Schneeballkomplexität führt.

Weitere Informationen finden Sie in diesem Artikel: Mixins gelten als schädlich. Allerdings ist HOC kein Allheilmittel. Es bringt natürlich seine eigenen Probleme mit sich. Der Punkt ist: Die Verwendung gewöhnlicher Komponenten mit render prop kann alles bewirken, was HOC kann.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

jQuery implementiert eine rekursive unendliche Ebenenfunktion

So implementieren Sie ein Verantwortungskettenmuster in JavaScript

Verwenden Sie Ajax und Jquery, um die sekundäre Verknüpfung des Dropdown-Felds zu realisieren

Verwandte Probleme mit dem Vue-awesome-swiper-Plug-in

vue So verwenden Sie das Better-Scroll-Plug-in

So erhalten Sie den angegebenen Indexwert mit jquery

Entwicklung verwandter Warenkomponenten im Vue-Framework

Die erste Verwendung der Stiftinstallationsmethode in Vue (ausführliches Tutorial)

Vergleich der Verwendung von Express und Koa (ausführliches Tutorial)

Bezahlte Online-Kurse in Vue (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von Vue-High-Level-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!