Sprechen Sie kurz über die Hook-Funktionen in Vue3 (Zusammenfassungsfreigabe).

In diesem Artikel erfahren Sie, warum Sie Hook verwenden sollten und was der Unterschied zwischen Hook und React in Vue 3 ist. Ich hoffe, dass er für alle hilfreich ist. Das Konzept des Hooks wird in React eingeführt. Lassen Sie uns zunächst kurz vorstellen, wie Hook in React entstanden ist.

Bezogen auf die bekannte Vue 2-Codestruktur sehen wir: React verwendet die Klasse als Ganzes, um eine Komponente zu kapseln; ein Zustand dient der Verwaltung von Variablen, was den Daten in Vue 2 entspricht; Es verfügt außerdem über einen Lebenszyklus und benutzerdefinierte Methoden. Der Vorlagenteil wird mithilfe von JSX in eine Rendering-Funktion geschrieben. Wenn Sie die Ansicht aktualisieren müssen, müssen Sie die Variablen im Status über die setState-Methode aktualisieren. Anschließend werden die Daten in der Ansicht entsprechend aktualisiert. Sie können die Daten nicht direkt durch Aktualisieren der Ansicht aktualisieren.

Es ist ersichtlich, dass es sich im Gegensatz zu Vue um einen einseitigen Datenfluss handelt. Die Aussprache von Vue ist „view“ und „state“ bedeutet Zustand. Wenn Vue ansichtsorientiert ist, ist React zustandsorientiert.

Da React die Klasse zum Implementieren von Komponenten verwendet, treten Probleme auf: Sie müssen auf das Zeigeproblem in der Klasse achten. Wenn Komponenten wiederverwendet und verschachtelt werden, müssen die Requisiten jeder Komponentenebene bedient werden. Die Logik ist komplex .

So entstand die Funktionskomponente, die die Zustandstrennung für React realisiert.

Hier werden die Variablendeklaration, die Komponentenmethode und die Rendering-Funktion alle in einer Funktion gekapselt und ein neuer useEffect hinzugefügt, um den Lebenszyklus zu implementieren und Änderungen in Zustandsdaten zu überwachen. Wenn diese Komponente deklariert, aktualisiert oder zerstört wird, ruft sie die Funktion auf, die sie definiert, und gibt eine neue Ansicht aus.

Sehen wir uns an, wie man eine Komponente in Vue 3 definiert:

Ist es ähnlich wie oben? Obwohl die Schreibmethoden ähnlich sind, unterscheiden sie sich in der Umsetzung dennoch stark. Wie bereits erwähnt, ist React zustandsorientiert, während Vue ansichtsorientiert ist. React-Funktionskomponenten aktualisieren die Ansicht, indem sie die Funktion erneut aufrufen und den Lebenszyklus in die Komponentendeklaration integrieren. Während die Setup-Methode von Vue nur „beforeCreate“ und „created“ ersetzt, werden andere Lebenszyklen weiterhin innerhalb der Komponente definiert und jede Instanz führt Setup nur einmal aus. Unterstützt die Überwachung von Änderungen in Ansichten und Daten.

Manche Leute sagen oft, dass Vue eine weitere Implementierung von React ist, aber die beiden Konzepte sind völlig unterschiedlich. Tatsächlich kann man verstehen, dass Vue die Designmethode von React übernimmt und gleichzeitig seine eigenen Eigenschaften behält.

Was ist Hook? Die Definition in React besteht darin, die Zustandsdaten in der Funktionskomponente beizubehalten und gleichzeitig die Lebenszyklusfunktion zu integrieren, wobei die gesamte Komponente als Hook-Funktion verwendet wird.

Benutzerdefinierter Hook

Wenn die Komponenten komplex sind, kann eine sich wiederholende Logik in mehreren Komponenten abstrahiert werden. Bevor Hook geboren wurde, verfügten React und Vue über Komponentenentwurfsmuster höherer Ordnung, die in React und Mixin in Vue 2 verwendet wurden. Warum sollten wir sie aufgeben und Hooks verwenden? Was sind die Vorteile der Verwendung benutzerdefinierter Hooks? Werfen wir zunächst einen kurzen Blick auf HOC und Mixin und erfahren es dann, nachdem wir sie verglichen haben. Das Prinzip von

HOC besteht darin, die Komponente als Parameter an eine Funktion zu übergeben, den Wiederverwendungsteil hinzuzufügen und die neue Komponente im Dekoratormodus als Rückgabewert zu verwenden. Bei Mixins handelt es sich um das Zerlegen wiederverwendeter Teile in kleine Teile und deren Zusammenfügen, wenn eine bestimmte Komponente benötigt wird. In der Praxis haben Mixins die folgenden Nachteile:

Führt implizite Abhängigkeiten ein.

Es kann zu Sequenzierungs- oder sogar Code-Konfliktabdeckungsproblemen zwischen verschiedenen Mixins kommen.

Mixin-Code führt zu einer Schneeball-Komplexität Um diese Probleme zu lösen, verwendet React HOC, weist jedoch immer noch Mängel auf:

• Der Zustand einer Komponente wirkt sich auf die Eigenschaften vieler Komponenten aus

• Verursacht Höllenverschachtelung

• Bei Verwendung der neuen Hook-Komponentenstruktur wird jedoch Flachheit verwendet kann erreicht werden Der Wiederverwendungsteil der Komponente wird in einer Shop-ähnlichen Weise aufgerufen, wodurch das Problem der unbekannten Mixin-Quelle und der höllischen Verschachtelung von HOC gelöst wird.

• Vue 3 implementiert Hook

Wie bereits erwähnt wandelt React Klassenkomponenten in Funktionskomponenten um und implementiert Hook. In Vue 3 werden Hooks über den wichtigsten Teil der neuen Funktionen von Vue 3 implementiert – die zusammengesetzte API.

Verwenden Sie die kombinierte API zum Schreiben von Komponenten. Vereinfacht ausgedrückt werden die Daten, Methoden, Lebenszyklen usw., die zuvor nach Datentyp aufgeteilt wurden, in einer Setup-Funktion abgelegt, und die Komponente muss nur die Setup-Funktion aufrufen einmal während der Initialisierung. Die spezifische API wird hier nicht im Detail vorgestellt. Sie können die offizielle Dokumentation überprüfen. (antfu erklärt die kombinierte API)

Mit der kombinierten API können Sie einen Hook implementieren, indem Sie die Schreibmethode von React nachahmen. Dies ist beispielsweise ein Beispiel für die Dateisystemverwaltung:





Stellen Sie sich vor, wenn dieser Code in Vue 2 implementiert ist, handelt es sich lediglich um eine Aktion zum Erstellen eines Ordners, und die deklarierten Variablen, Methoden und Listener müssen dies tun Die Daten werden in verschiedene Teile zerlegt, ganz zu schweigen davon, dass wir auch Funktionen wie Löschen, Bearbeiten, Kopieren und Einfügen usw. implementieren müssen. Der Arbeitsaufwand für die Änderung des Codes ist sehr groß, wenn man darüber nachdenkt.

Aber in dieser Hook-Form können wir Codes kombinieren, die dieselbe Funktion implementieren. Der Code ist nicht nur sehr prägnant und klar, wir können auch die Quelle der wiederverwendeten Komponenten sehr gut kennen.

Im Vergleich zu React's Hook hat Vue 3 auch einige Optimierungen auf der untersten Ebene vorgenommen, wodurch die Einschränkungen der Reaktionsfunktionskomponenten aufgehoben und die Leistung verbessert wurden.

Zusammenfassung

Der allgemeine Inhalt dieses Artikels lautet wie folgt:



Denken Sie darüber nach:

Warum gibt es ein Hook-Konzept anstelle des ursprünglichen HOC und Mixin? Man sieht, dass in der Programmentwicklung die allgemeine Fortschrittsrichtung immer abstrakter wird, ähnlich wie bei der Entwicklung von prozessorientierten Programmiersprachen wie C zu objektorientierten Programmiersprachen wie Java Die Entwicklung des nativen Front-Ends Three Musketeers zur Verwendung von Frameworks für die Komponentenentwicklung und Hook für die Komponentenentwicklung ist dasselbe. Kapseln Sie verwandte Logik zusammen, isolieren Sie irrelevante, reduzieren Sie Kopplungen, machen Sie wiederverwendete Logik anderen Komponenten in Form von Schnittstellen zugänglich und schützen Sie die zugrunde liegende Implementierung.

Auf diese Weise wird die gleiche Funktion prägnanter geschrieben, was keine versteckten Abhängigkeiten mit sich bringt, was die Komplexität der Wartung verringert. Die vorgeschriebene Benennung erleichtert das Lesen und Erweitern des Codes und ist auch förderlich für mehrere. Zusammenarbeit zwischen Personen.

State ist ein sehr wichtiges Konzept in React. Redux wird für die Statusverwaltung verwendet, um den Status in React einfach zu verwalten, während Vue ein ähnliches Vuex implementiert, aber es gibt keinen Statusmechanismus. In ähnlicher Weise verwenden beide Hooks auch den Effekt. In React wird der Effekt auch zur Lösung des Zustandsproblems verwendet, während Vue ihn in einem völlig anderen Mechanismus verwendet.

React scheint ein System mit einer Zustandsmaschine als zentraler Idee und einer engen Logik zwischen den Teilen implementiert zu haben, und Vue hat seine eigene Methode verwendet, um einige Methoden in React erneut zu implementieren, sie vollständig zu trennen und die jeweils benötigte zusammenzustellen . Komm herein. Sie verwenden zwei völlig unterschiedliche Konzepte. Es ist unmöglich zu sagen, wer besser ist, aber wenn Sie ein Framework erlernen, können Sie Ihr Verständnis vertiefen, indem Sie sich auf die Designideen eines anderen Frameworks beziehen.

You Yuxi hat vor einiger Zeit auch eine Frage zu Zhihu beantwortet und gesagt, dass es sich bei AngularJS, React to Vue tatsächlich um einen konzeptionellen Fortschritt handelt. Wenn Sie diese Ideen nur nachahmen, um ein neues Framework zu erstellen, wird das Rad einfach neu erfunden , aber wenn wir einen Meilenstein erreichen wollen, sollten wir das Konzept verbessern.

【Verwandte Empfehlung: „vue.js Tutorial“】

Das obige ist der detaillierte Inhalt vonSprechen Sie kurz über die Hook-Funktionen in Vue3 (Zusammenfassungsfreigabe).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!