Das HOC-Muster (Higher Order Component) ist bei React-Entwicklern sehr beliebt. Aber Vue-Entwickler umgehen es irgendwie. Sehr eitel. Versuchen wir es herauszufinden.
Was ist ein HOC?
Eine Komponente höherer Ordnung (HOC) ist eine Funktion, die eine vorhandene Komponente übernimmt und eine andere Komponente zurückgibt, die die ursprüngliche Komponente umschließt und neue Logik hinzufügt.
HOC gegen Mixins
Vielleicht werden sich viele fragen, warum sie HOC verwenden, wenn es Verunreinigungen gibt? Sie fügen Komponenten auch neue Funktionen hinzu. Was kann HOC welche Verunreinigungen nicht wissen?
Erinnern Sie sich zunächst daran, welche Verunreinigungen in Vue enthalten sind (Definition aus der Dokumentation von Vue):
Mixins sind ein flexibles Tool zur Wiederverwendung von Code in Vue-Komponenten. Das Verunreinigungsobjekt kann beliebige Komponentenoptionen enthalten. Wenn eine Verunreinigung von einer Komponente verwendet wird, werden alle Verunreinigungsoptionen mit den eigenen Optionen der Komponente „gemischt“.
Es scheint, dass der Zweck von Verunreinigungen und HOC der gleiche ist - sie ermöglichen es Ihnen, die Funktionalität verschiedener Komponenten zu erweitern. Und draußen (mit der letzten Komponente) kann es sogar gleich aussehen.
Der Unterschied liegt jedoch im Prinzip von HOC und Verunreinigungen. Verunreinigungen werden beim Deklarieren einer Komponente „eingemischt“ - jede Komponenteninstanz enthält sie.
Mit HOC verpacken wir eine Instanz einer Komponente, die die Komponente selbst nicht ändert, sondern dort, wo sie benötigt wird, eine neue erstellt. Dies bedeutet, dass wir nur den Code betreffen, in dem wir ihn verwenden. Aus diesem Grund reduzieren wir die Kohärenz des Codes, machen ihn lesbarer und flexibler.
HOC ist ein bisschen wie ein Dekorationsmuster .
HOC-Erstellung
Na dann. Schauen wir uns das alles anhand eines Beispiels an.
Wir haben also eine Schaltflächenkomponente:
Nach einiger Zeit mussten wir plötzlich das Drücken einiger Tasten (aber nicht aller) protokollieren. Wir können dies durch Verunreinigungen tun, indem wir den Code für die Anmeldung in der Schaltflächenkomponente mischen und dann an der richtigen Stelle die Protokollierung über eine Komponenteneigenschaft aktivieren oder deaktivieren. Aber stimme zu, das ist nicht sehr bequem? Und wenn es viele solcher Funktionen gibt? Ein Fehler - und alle Tasten funktionieren möglicherweise nicht mehr richtig.
HOC wäre in diesem Fall eine großartige Lösung. Wir wickeln den Knopf einfach an einigen Stellen mit dem entsprechenden HOC ein.
Es ist Zeit, das HOC in der Praxis kennenzulernen.
Schritt 1. Erstellen Sie eine HOC-Funktion
Wir erinnern uns, dass HOC eine Funktion ist, die eine Komponente als Eingabe verwendet und eine andere zurückgibt. Erstellen wir also eine solche Funktion. Nennen wir es withLoggerButton.
Es ist üblich, mit der Benennung von HOC-Funktionen zu beginnen - dies ist eine Art Identifikationszeichen für HOCs.
Das Ergebnis ist eine Funktion, die eine Button-Komponente als Eingabe verwendet und dann eine neue Komponente zurückgibt. In der Renderfunktion verwenden wir die ursprüngliche Komponente, aber mit einer Änderung fügen wir ein Ereignis hinzu, um auf den DOM-Knoten zu klicken. Die Ausgabe der Beschriftung wird in der Konsole angeklickt.
Wenn Sie nicht verstehen, was hier passiert, was h und Kontext sind, lesen Sie zuerst die vue-Dokumentation zur Funktionsweise von Renderfunktionen.
Im aktuellen Beispiel habe ich die Funktionskomponente verwendet, weil Ich brauche keine Bedingung. Niemand verbietet Ihnen, eine reguläre Komponente anstelle einer funktionalen zurückzugeben, aber vergessen Sie nicht, dass funktionale Komponenten viel schneller sind als gewöhnliche.
Schritt 2. Verwenden von HOC
Mit der resultierenden Funktion erstellen wir nun einfach eine neue Komponente.
Sie müssen nur noch die empfangene Komponente verbinden, für die eine Klickprotokollierung erforderlich ist.
Letztes Beispiel:
Zusammensetzung
All dies ist sicherlich großartig, aber was ist, wenn Sie eine Schaltfläche benötigen, die sich nicht nur anmeldet, sondern auch eine andere Aktion ausführt?
Alles ist einfach. Wir verwandeln ein HOC in ein anderes. Wir können so viele HOCs mischen, wie wir möchten.
Auch für die Komposition gibt es viele vorgefertigte Funktionen und Bibliotheken, die die Komposition erleichtern.
HOC ist ein einfaches, aber sehr leistungsfähiges Muster. Es wird an der Basis vieler Bibliotheken verwendet. Es ist keine Silberkugel oder ein vollständiger Ersatz für Mixins und den Mechanismus der Komponentenvererbung. Verwenden Sie es mit Bedacht in Kombination mit anderen Mustern, und Ihre Vue-Anwendungen werden wirklich flexibel.
Kreuzpfosten