Was ist die Hook-Funktion?

Eine Hook-Funktion ist ein Code, der Funktionsaufrufe, Ereignisse oder Nachrichten verarbeitet und abfängt, die zwischen Softwarekomponenten übertragen werden. Es handelt sich im Wesentlichen um ein Programm, das zur Verarbeitung von Systemnachrichten verwendet wird. Es wird über Systemaufrufe in das System eingebunden.

[Empfohlene Kurse: React Tutorial, Vue.js Tutorial ]

[Empfohlener Artikel: Reagiert besser oder vuejs 】

Was ist eine Hook-Funktion?

In der Computerprogrammierung werden Hook-Funktionen hauptsächlich zum Übertragen zwischen Softwarekomponenten durch Abfangen von Funktionsaufrufen oder Nachrichten oder Ereignissen verwendet das Verhalten eines Betriebssystems, einer Anwendung oder einer anderen Softwarekomponente ändern oder verbessern. Der Code, der diesen abgefangenen Funktionsaufruf, dieses Ereignis oder diese Nachricht verarbeitet, wird als Hook bezeichnet. Im Wesentlichen handelt es sich um ein Programm, das Systemnachrichten verarbeitet und über Systemaufrufe in das System einbindet. Hook-Funktionen können für viele Zwecke verwendet werden, einschließlich zum Debuggen und Erweitern der Funktionalität. Allgemeine Hook-Funktionen: React-Lebenszyklusfunktion, Vue-Lebenszyklusfunktion usw.

Die Bedeutung von React-Hooks

React-Hooks werden verwendet, um eine Verbindung von Funktionskomponenten zu React herzustellen state Einfache Funktionen und Lebenszyklusfunktionen

Dies bedeutet, dass wir mit Hooks den Status unserer Funktionskomponenten einfach manipulieren können, ohne sie in Klassenkomponenten konvertieren zu müssen. Dies erspart uns die Auseinandersetzung mit dem gesamten Boilerplate-Code.

Hooks funktionieren nicht innerhalb von Klassen, sie ermöglichen Ihnen die Verwendung von React ohne Klassen. Und durch ihre Verwendung können wir die Verwendung von Lebenszyklusmethoden wie ComponentDidMount, ComponentDidUpdate usw. vollständig vermeiden. Stattdessen verwenden wir integrierte Hooks wie useEffect, useMutationEffect oder useLayoutEffect.

Hooks sind einfache JavaScript-Funktionen, aber sie erfordern zwei zusätzliche Regeln

(1) Rufen Sie Hooks nur auf der obersten Ebene auf. Rufen Sie Hooks nicht in Schleifen, Bedingungen oder verschachtelten Funktionen auf. (2) Rufen Sie Hooks nur aus React-Funktionskomponenten auf. Rufen Sie Hooks nicht über reguläre JavaScript-Funktionen auf. Es gibt einen weiteren gültigen Ort zum Aufrufen benutzerdefinierter Hooks.

Wir müssen uns daran erinnern, dass diese Komponenten im Zusammenhang mit React-Funktionskomponenten früher als zustandslos bezeichnet wurden, aber jetzt bieten uns Hooks Möglichkeiten, den Zustand in diesen Komponenten zu verwenden

Die Bedeutung von Vuejs Hook

Eine Komponente in Vuejs hat einen Lebenszyklus, der von Vue selbst verwaltet wird, wenn es die Komponente erstellt Komponente in das DOM, aktualisieren Sie die Komponente und zerstören Sie die Komponente. Das heißt, jede Komponente hat ihre eigenen Lebenszyklusereignisse, und wir können uns auf Schlüsselmomente in diesem Lebenszyklus konzentrieren, indem wir einen oder mehrere Lebenszyklus-Hooks implementieren. Diese Hooks werden von Vue selbst aufgerufen und bieten uns so die Möglichkeit, die Komponente zu verwenden Fügen Sie in bestimmten Phasen des Lebenszyklus unseren eigenen Code hinzu.

Vue verfügt über acht Lebenszyklus-Hooks. Der Schlüssel zum Erinnern an diese besteht darin, zu wissen, dass es sich bei vier davon um ausgelöste Ereignisse handelt, die anzeigen, dass das tatsächliche Ereignis eintreten wird. Sie beginnen mit „before“ vor dem eigentlichen Hook und werden vor dem eigentlichen Hook abgefeuert.

Vues acht Lebenszyklus-Hooks

(1) beforeCreate: Dies ist der erste Hook, der nach der Initialisierung der Vue-Instanz aufgerufen wird. Zu diesem Zeitpunkt sind Datenbeobachtungsereignisse, berechnete Eigenschaften und Beobachter noch nicht festgelegt. Daher können wir mit keinem Teil der Komponente interagieren.

(2) erstellt: Dieser Hook wird aufgerufen, nachdem die Instanz erstellt wurde. In diesem Stadium hat die Instanz die Verarbeitung abgeschlossen und Datenbeobachtung, berechnete Eigenschaften, Methoden, Beobachter und Ereignisrückrufe wurden eingerichtet. Zu diesem Zeitpunkt ist keine Interaktion mit dem DOM möglich, da die Komponente

noch nicht gemountet wurde (3) beforeMount: Zu diesem Zeitpunkt kann die Vorlage aus der Vorlage oder den Rendering-Optionen oder aus kompiliert werden OuterHTML des Elements, mit dem Vue initialisiert wird. Die Vorlage wurde noch nicht gerendert. Bitte beachten Sie, dass diese Hook-Funktion während des serverseitigen Renderns nicht aufgerufen wird

(4) mount: Wird aufgerufen, nachdem die Instanz gemountet wurde, wobei das el-Attribut durch die neue bestimmt wird vm erstellt. $elreplacement. Wenn die Root-Instanz an ein dokumentinternes Element gemountet wird, befindet sich vm$el auch im Dokument, wenn der Mount aufgerufen wird. Nach dem Aufruf des angehängten Hooks ist die Komponente voll funktionsfähig und wir können vollständig mit ihr interagieren.

Zu beachten ist, dass die Hook-Funktion nicht garantiert, dass das Element zum DOM hinzugefügt wurde. Um in dieser Phase DOM-abhängigen Code auszuführen, müssen Sie den Code in eine Rückrufmethode und in die Funktion Vue.nextTick() einfügen. Beispiel

<template>
  <p>I&#39;m text inside the component.</p>
</template>
<script>
export default {
  mounted() {
    // Element might not have been added to the DOM yet
    this.$nextTick(() => {
        // Element has been definitely added to the DOM
       console.log(this.$el.textContent); // I&#39;m text inside the component.
    }
  }
}
</script>

(5) beforeUpdate: Vor dem Patchen des DOM können unsere Daten jederzeit geändert werden und das DOM muss aktualisiert werden. Beachten Sie, dass diese Hook-Funktion beim serverseitigen Rendern nicht aufgerufen wird, da nur das anfängliche Rendern auf der Serverseite durchgeführt wird.

(6) aktualisiert: Lösen Sie die Hook-Funktion aus, nachdem die Änderung abgeschlossen ist. Wenn diese Funktion aufgerufen wird, wird das DOM der Komponente aktualisiert, sodass hier DOM-bezogene Vorgänge ausgeführt werden können. In den meisten Fällen sollte jedoch eine Zustandsänderung innerhalb von Hooks vermieden werden. Normalerweise ist es besser, berechnete Eigenschaften oder Beobachter zu verwenden.

Es ist zu beachten, dass die Aktualisierung nicht garantiert, dass alle untergeordneten Komponenten auch neu gerendert werden. Wenn Sie warten möchten, bis die gesamte Ansicht neu gerendert wurde, können Sie vm, $el

innerhalb des Updates (7) beforeDestroy verwenden: Wird vor dem Zerstören der Vue-Instanz aufgerufen. Zu diesem Zeitpunkt ist die Instanz noch voll funktionsfähig. Hier können notwendige Aufräumarbeiten durchgeführt werden. Beachten Sie, dass dieser Hook beim serverseitigen Rendern nicht aufgerufen wird.

(8) Zerstört: Wird aufgerufen, nachdem die Vue-Instanz zerstört wurde. Wenn diese Funktion aufgerufen wird, wurden alle Anweisungen der Vue-Instanz entbunden, alle Ereignis-Listener entfernt und alle untergeordneten Vue-Instanzen zerstört. Beachten Sie, dass dieser Hook beim serverseitigen Rendern nicht aufgerufen wird.

Zusammenfassung: Das Obige ist eine Einführung in die Hook-Funktionen, ich hoffe, es wird für alle hilfreich sein

Das obige ist der detaillierte Inhalt vonWas ist die Hook-Funktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!