React: Eine kurze Einführung in die Verwendung von Effect

Was ist eine Wirkung / Nebenwirkung ?

Die Begriffe Nebeneffekt und Effekt werden synonym verwendet und bedeuten in React dasselbe: Sie beziehen sich auf Vorgänge, die sich nicht auf die Benutzeroberfläche oder den Ausgabewert auswirken. Wenn die von Ihnen ausgeführte Operation eine andere Statusänderung als den endgültigen Rückgabewert verwaltet, ist dies ein Nebeneffekt!

Die Funktion einer React-Komponente besteht darin, das Rendern zu verarbeiten und die Benutzeroberfläche zu manipulieren. Da sich Nebeneffekte nicht auf die Renderphase auswirken, gehören sie nicht in den Hauptteil einer Komponente.

Was ist useEffect?

useEffect ist ein React Hook, mit dem Sie Nebeneffekte unabhängig vom Rendering ausführen können.

Wenn Sie Teile Ihres Codes haben, die nicht direkt mit der Benutzeroberfläche zusammenhängen, oder Aufgaben, die asynchron sind und außerhalb des normalen Kontrollflusses ausgeführt werden, sollten Sie sie in den useEffectHook einfügen. Dies ermöglicht es ihnen, außerhalb des Renderzyklus zu arbeiten und hinter den Kulissen zu arbeiten, ohne die Benutzeroberfläche zu stören.

useEffect akzeptiert zwei Argumente:

• ein (erforderlicher) Rückruf – der Effekt – der nach der Komponentenbewertung ausgeführt wird, wenn sich die angegebenen Abhängigkeiten ändern;
• die (optionalen) Abhängigkeiten, die von dieser Funktion geprüft werden.

Beispiele für Berechnungen, die unabhängig vom Rendern sind und in einem useEffectHook leben sollten :

• Verwendung von Timern;
• Netzwerkanfragen (wie fetch);
• Lesen aus dem lokalen Speicher;
• Registrieren und Aufheben der Registrierung von Ereignis-Listenern;
• das DOM manuell aktualisieren.

• import { useEffect } from 'react'
• Die Nebenwirkungslogik geht in die Rückruffunktion.
• Abhängigkeiten steuern, wann der Nebeneffekt ausgeführt werden soll. Sie werden als Array übergeben.

useEffect(() => { logic }, [dependencies]);

Schauen wir uns an, wie useEffectfunktioniert. In diesem Beispiel erhalten wir Benutzerinformationen aus einer Datenbank, nachdem ein loggedInStatus auf aktualisiert wurde true, und drucken diese Informationen dann auf der Seite:

import { useState, useEffect } from 'react';
function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userName, setUserName] = useState("");
  useEffect( () => {
    if (loggedIn === true) {
      // [ retrieving user info from an imaginary database ]
      // [ we set the returned user info in state ]
      setUserName("Lisa Simpson");
    } else {
      setUserName("");
    }
  }, [loggedIn]);
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={ () => setLoggedIn(!loggedIn) } >Log in / out</button>
      {
        loggedIn === true
          ? <p>Hello, {userName}</p>
          : <p>Please log in</p>
      }
    </div>
  )
};
export default App;

• Wir haben eine ifAnweisung, die eine imaginäre Datenbank überprüft, um zu sehen, ob der Benutzer loggedIn. Wenn dies der Fall ist, aktualisieren wir den Status von userName. (In der Rückgabe haben wir eine Logik, um ihren Namen auf dem Bildschirm anzuzeigen, wenn loggedIn === true.)
• Wenn die Schaltfläche (in der Rückseite) angeklickt wird, loggedInwird der Status mithilfe der setLoggedInFunktion aktualisiert .
• useEffectwird jedes Mal ausgeführt, wenn sich der loggedInStatus ändert, da wir loggedInals Abhängigkeit übergeben wurden.
• useEffectwird nicht ausgeführt, wenn die setUserNameFunktion ausgeführt wird, da wir sie nicht in das Abhängigkeitsarray eingefügt haben.

Abhängigkeiten sind die Art und Weise, wie wir die Ausführung steuern useEffect.

• Wenn Sie useEffectbei jedem Rendering ausführen möchten , lassen Sie Abhängigkeiten aus.
• Wenn es nach dem anfänglichen Rendern nur einmal ausgeführt werden soll, stellen Sie ein leeres Array bereit.
• Wenn es ausgeführt werden soll, nachdem sich ein bestimmter Wert geändert hat, übergeben Sie dies als Abhängigkeit.

• Wenn Sie propsoder state-Werte verwenden, müssen Sie diese als Abhängigkeiten deklarieren; wenn sich diese Werte ändern, useEffectwird ausgeführt. (Im obigen Beispiel ist es in Ordnung, die setUserNameFunktion aus den Abhängigkeiten wegzulassen, da es sich nicht um einen Zustandswert handelt. Es handelt sich um eine Funktion, die den Zustandswert aktualisiert , sodass sie nie mit dem Zustand asynchron ist.)

• Zustandsaktualisierungsfunktionen;
• integrierte APIs oder Funktionen;
• Variablen oder Funktionen, die außerhalb einer Komponentenfunktion definiert sind (wie eine Hilfsfunktion, die sich in einer separaten Datei befindet).

Einige Nebeneffekte – wie Timer oder Abonnements (Verbindungen zu einer persistenten Datenquelle) – erfordern eine Bereinigung, da wir nicht möchten, dass sie herumschweben, nachdem die Komponente aus dem DOM entfernt wurde.

Zum Aufräumen geben wir einfach eine Funktion zurück useEffectund es wird aufgeräumt; Diese Funktionen werden in geeigneter Weise als bezeichnet cleanup functions. Diese Bereinigungsfunktionen werden nach dem nächsten Rendern ausgeführt, jedoch vor dem nächsten useEffect.