Zu verstehen, wie Sie Ihre Ressourcen nutzen, ist eine Sache und zu wissen, wann Sie sie einsetzen sollten, eine andere. Während ich das Programmieren in React lernte, hatte ich einige Schwierigkeiten zu verstehen, wann ich useEffect in meinen React- Anwendungen implementieren sollte . Aber diese Zeiten sind vorbei!

Was macht useEffect?

Wenn Sie mit React Klasse Lifecycle Methoden vertraut sind, können Sie sich vorstellen useEffectHaken wie componentDidMount, componentDidUpdateund componentWillUnmountkombiniert. Manchmal möchten wir zusätzlichen Code ausführen, nachdem React das DOM aktualisiert hat. Wir können useEffect-Hooks in unser Programm implementieren, um zusätzlichen Code auszuführen. React merkt sich die Funktion, die Sie übergeben haben (wir nennen sie unseren „Effekt“) und ruft sie später auf, nachdem die DOM-Updates durchgeführt wurden.

Schlüsselkonzepte, die ich über React-Komponenten gelernt habe:

• Eine Komponente ist eine Funktion, die Requisiten aufnimmt und JSX . zurückgibt
• Wenn wir ReactDOM.renderunsere Komponenten aufrufen und übergeben, werden alle unsere Komponenten gerendert, indem unsere Komponentenfunktionen aufgerufen , Requisiten übergeben und die DOM-Elemente aus JSX unserer Komponenten erstellt werden
• Wenn ein React-App- Zustand durch Aufrufen der setStateFunktion aktualisiert wird , rendert React die Komponente zusammen mit allen ihren untergeordneten Elementen neu

In der Programmierung können wir uns Funktionen hauptsächlich als nützlich für ihre Rückgabewerte oder ihre Nebenwirkungen vorstellen: Wenn wir eine Funktion aufrufen und diese Funktion eine Änderung in unserer Anwendung außerhalb der Funktion selbst verursacht , wird davon ausgegangen, dass sie einen Nebeneffekt verursacht hat . Das Stellen von Netzwerkanforderungen, der Zugriff auf Daten aus einer Datenbank oder das Rendern von Komponenten basierend auf Benutzerinteraktionen usw. sind einige gängige Beispiele für Nebenwirkungen bei der Programmierung

Um die folgenden Nebenwirkungen innerhalb unserer Komponenten zu bewältigen, benötigen wir einen speziellen Haken von React: useEffect:

• Einige Daten von einer API abrufen, wenn eine Komponente geladen wird
• Timer starten oder stoppen
• Ändern Sie das DOM manuell in React-Komponenten
• Abonnieren Sie einen Chat-Dienst

Schritt 1: Um den useEffectHook zu verwenden, müssen wir ihn zuerst importieren:

import React, { useEffect } from "react";

function App() {
  useEffect(
    // side effect function
    () => {
      console.log("useEffect called");
    }
  );

  console.log("Component rendering");

  return (
    <div>
      <button>Click Me</button>
      <input type="text" placeholder="Type away..." />
    </div>;
  )
}

• Komponentenrendering
• useEffect aufgerufen

Mit diesem Hook teilen Sie React mit, dass Ihre Komponente nach dem Rendern etwas tun muss. React merkt sich die Funktion, die Sie übergeben haben, und ruft sie später auf, nachdem Sie die DOM-Updates durchgeführt haben. Der useEffect wird standardmäßig nach jedem Rendern ausgeführt. Es läuft nach dem ersten Rendern und nach jedem Update. React garantiert, dass das DOM bis zum Ausführen der Effekte aktualisiert wurde.

useState Hook hinzufügen

Schritt 3: Um einen Zustand hinzuzufügen, müssen wir zuerst den useStateHook importieren :

import React, { useEffect, useState } from "react";

Schritt 4: Dann rufen wir in unserer Komponente auf, useStatedie ein Array zurückgibt , das zwei Variablen enthält:

• count: ein Verweis auf den aktuellen Wert dieses Zustands in den Interna von React
• setCount: eine Setter- Funktion, damit wir diesen Zustand aktualisieren können

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    console.log("useEffect called");
  });

  console.log("Component rendering");

  return (
    <div>
      <button onClick={() => setCount((count) => count + 1)}>
        I've been clicked {count} times
      </button>
      <input
        type="text"
        placeholder="Type away..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

• Komponentenrendering
• useEffect aufgerufen

Unten ist ein Beispiel für den Zyklus, den wir beim Rendern der Komponente erwarten sollten:

render -> useEffect -> setState -> re-render -> useEffect

Manchmal möchten wir unsere Nebenwirkungen nur unter bestimmten Bedingungen ausführen. Zum Beispiel: Stellen Sie sich vor, wir verwenden den useEffectHook, um einige Daten von einer externen API abzurufen (ein häufiger Fall für useEffect). In diesem Szenario möchten wir nicht jedes Mal, wenn unsere Komponente aktualisiert wird, eine Netzwerkanfrage stellen, sondern nur beim ersten Rendern unserer Komponente.

Wenn wir eine Komponente schreiben, die den Status aus dem useEffectCallback heraus aktualisiert , führt dies zu einer endlosen Schleife von fetchAnfragen (bis die API uns rauswirft, weil wir das Ratenlimit erreicht haben 👀).

Beispiel für den Endlosschleifenzyklus:

render -> useEffect -> setImages -> render -> useEffect -> setImages -> render -> etc...

useEffect(
  // 1st arg: side effect (callback function)
  () => { console.log("useEffect called") },
  // 2nd arg: dependencies array
  [count]
);

Wir können auch ein leeres Array von Abhängigkeiten als zweites Argument übergeben, wie folgt:

useEffect(() => {
  console.log("useEffect called");
}, []); // second argument is an empty array

useEffect(() => {
  fetch('API URL')
    .then((r) => r.json())
    .then((data) => {
      setImages(data.messages);
    });
}, []); // second argument is an empty array

render -> useEffect -> setImages -> render

Ein weiterer Nebeneffekt, den wir hier demonstrieren können, ist das Aktualisieren von Teilen einer Webseite außerhalb des React-DOM-Baums. React ist für alle DOM-Elemente verantwortlich, die von unseren Komponenten gerendert werden, aber einige Teile der Webseite leben außerhalb dieses Baums. Zum Beispiel die <title>unserer Seite – das wird im Browser-Tab angezeigt, wie folgt:

Wir können den Titel als Nebeneffekt mit dem useEffectHaken aktualisieren .

Beispiel 1:

useEffect(() => {
  document.title = text;
}, [text]);

Beispiel 2:

Wir können eine setTimeoutFunktion ausführen . Diese Funktion soll die Variable nach 5 Sekunden wieder auf 0 zurücksetzen . count

useEffect(() => {
  setTimeout(() => setCount(0), 5000);
}, []);

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    document.title = text;
  }, [text]);

  useEffect(() => {
    setTimeout(() => setCount(0), 5000);
  }, []);

  console.log("Component rendering");

  return (
    <div>
      <button onClick={() => setCount((count) => count + 1)}>
        I've been clicked {count} times
      </button>
      <input
        type="text"
        placeholder="Type away..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

useEffect Dependencies Spickzettel Cliff Notes

Hier ist eine kurze Anleitung, wie Sie das zweite Argument von verwenden, um useEffectzu steuern, wann Ihr Nebeneffekt-Code ausgeführt wird:

• useEffect(() => {}): Kein Abhängigkeits-Array

• useEffect(() => {}, []): Leeres Abhängigkeits-Array

• useEffect(() => {}, [variable1, variable2]): Abhängigkeiten-Array mit Elementen darin

Ressourcen

• Reagieren Sie Docs bei VerwendungEffect
• Eine vollständige Anleitung zur Verwendung von Effect