Hooks

  • 1 Minute

Hooks sind ein gängiges Muster in Frameworks, in denen Wertänderungen oder andere Ereignisse auftreten. Sie fügen Ihren eigenen Code auf zentralisierte Weise ein, um diesen bei Zustandsänderungen oder zu anderen Phasen eines Anwendungslebenszyklus auszuführen.

Effect-Hook

Diese Lerneinheit befasst sich mit dem Effect-Hook. Dieser Hook wird immer dann ausgelöst, wenn der Zustandswert festgelegt wird. Es wird ausgelöst, wenn der Anfangswert und alle nachfolgenden Änderungen festgelegt werden.

Mit dem Effect-Hook können Sie Code als Reaktion auf das Festlegen des Werts ausführen. Der ausgeführte Code kann Nebenwirkungen haben, also können Sie Werte bei Bedarf ändern.

Anwendungsfälle für Effect-Hooks

Sie können den Effect-Hook immer verwenden, wenn Sie Code für die Reaktion auf die Zustandsänderung zentralisieren müssen. Stellen Sie sich ein komplexes Formular mit vielen Werten vor. In der Regel sollten Sie die Schaltfläche Submit (Senden) deaktivieren, bis die Daten, die an den Server gesendet werden müssen, einen gültigen Zustand aufweisen. Angenommen, Sie verfügen über Ereignisse für einzelne Werte, die in den Daten geändert werden. Nachdem ein Benutzer ein Land/eine Region in Ihrer Anwendung ausgewählt hat, müssen Sie eine Liste der Bundesländer/Provinzen vom Server abrufen.

Nicht jeder Ereignislistener soll den Zustand untersuchen, um zu überprüfen, ob die Daten bereit sind, an den Server übermittelt zu werden. Dieses Setup wäre ineffizient. Stattdessen können Sie einen Effect-Hook verwenden. Ein Effect-Hook kann eine Funktion erstellen, die die Daten untersucht. Wenn die Daten einen gültigen Zustand aufweisen, kann die Funktion die Schaltfläche Submit (Senden) aktivieren.

useEffect

Verwenden Sie useEffect, um einen Listener für den Effect-Hook zu registrieren. useEffect akzeptiert die Ausführung einer parameterlosen Funktion, wenn der Zustand geändert wird.

useEffect(() => {
    // code goes here
});

useEffect wird standardmäßig immer ausgeführt, wenn der Zustand für ein beliebiges zustandsbehaftetes Objekt geändert wird. Sie können eine Abhängigkeit bereitstellen, um den Hook nur für eine bestimmte Gruppe von Objekten zu aktivieren.

useEffect(() => {
    // code goes here
}, [ someStatefulObject ]);