React useEffectOnce-Hook

Einführung

In diesem Lab werden wir lernen, wie man den useEffectOnce-Hook in React verwendet, um eine Callback-Funktion höchstens einmal auszuführen, wenn eine bestimmte Bedingung wahr wird. Dies kann nützlich sein, wenn wir eine bestimmte Aktion nur einmal ausführen möchten, z. B. wenn ein Komponent gehängt wird oder wenn ein Button geklickt wird. Am Ende dieses Labs werden Sie einen besseren Überblick darüber haben, wie man diesen Hook in Ihren React-Anwendungen implementiert.

React useEffectOnce-Hook

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Der folgende Code implementiert eine Funktion useEffectOnce(callback, when), die eine callback-Funktion nur einmal ausführt, wenn eine when-Bedingung wahr wird.

Um diese Funktion zu implementieren:

• Erstellen Sie eine Variable hasRunOnce mithilfe des useRef()-Hooks, um den Ausführungsstatus des Effekts zu verfolgen.
• Verwenden Sie den useEffect()-Hook, der nur dann ausgeführt wird, wenn sich die when-Bedingung ändert.
• Innerhalb des useEffect()-Hooks überprüfen Sie, ob when true ist und der Effekt zuvor noch nicht ausgeführt wurde. Wenn beide Bedingungen erfüllt sind, führen Sie callback aus und legen Sie hasRunOnce auf true fest.

const useEffectOnce = (callback, when) => {
  const hasRunOnce = React.useRef(false);
  React.useEffect(() => {
    if (when && !hasRunOnce.current) {
      callback();
      hasRunOnce.current = true;
    }
  }, [when]);
};

Hier ist ein Beispiel für die Verwendung von useEffectOnce():

const App = () => {
  const [clicked, setClicked] = React.useState(false);
  useEffectOnce(() => {
    console.log("mounted");
  }, clicked);
  return <button => setClicked(true)}>Click me</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Im Beispiel wird useEffectOnce() verwendet, um "mounted" in der Konsole auszugeben, wenn der Button zum ersten Mal geklickt wird. Dem useEffectOnce()-Hook werden zwei Argumente übergeben: die auszuführende callback-Funktion und die zu überprüfende when-Bedingung. Die when-Bedingung ist auf den clicked-Zustand gesetzt, sodass die callback-Funktion nur ausgeführt wird, wenn clicked zum ersten Mal true ist.

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das React useEffectOnce-Hook-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.