UseEffect in React verstehen: From Zero to Hero

React hat sich zu einer der beliebtesten JavaScript-Bibliotheken zum Erstellen dynamischer Benutzeroberflächen entwickelt. Einer der wichtigsten Hooks in React ist useEffect, der es Entwicklern ermöglicht, Nebenwirkungen in Funktionskomponenten zu verwalten. Zu den Nebenwirkungen gehören Vorgänge wie das Abrufen von Daten, das Einrichten von Abonnements oder das manuelle Bearbeiten des DOM. In diesem Blog werden wir eingehend darauf eingehen, was useEffect ist, wie es funktioniert, und Schritt-für-Schritt-Beispiele zum besseren Verständnis bereitstellen.

Was ist useEffect?

In React ist useEffect ein integrierter Hook, mit dem Sie Nebenwirkungen in Funktionskomponenten ausführen können. Nebenwirkungen sind, wie der Name schon sagt, Vorgänge, die sich auf etwas außerhalb der Funktion auswirken, z. B. API-Aufrufe, Timer, Protokollierung oder Aktualisierung des DOM.

Vor der Einführung von Hooks in React 16.8 mussten Sie Klassenkomponenten und Lebenszyklusmethoden wie ComponentDidMount, ComponentDidUpdate und ComponentWillUnmount verwenden, um Nebenwirkungen zu bewältigen. Mit useEffect werden diese Lebenszyklusereignisse nun in einer einzigen Funktion für Funktionskomponenten zusammengefasst.

Warum useEffect wählen?

useEffect ist aus mehreren Gründen ein leistungsstarker Hook für die Verwaltung von Nebenwirkungen in React:

1. Vereinfachung des Codes: Dadurch entfällt die Notwendigkeit klassenbasierter Komponenten und Lebenszyklusmethoden, sodass Sie saubereren, funktionsbasierten Code schreiben können.
2. Zentralisierte Nebeneffekte: Sie können alle Nebeneffekte, wie das Abrufen von Daten oder das Aktualisieren des DOM, an einem einzigen Ort verwalten.
3. Verbesserte Lesbarkeit: Es optimiert die Verwaltung von Lebenszyklusereignissen und macht den Code lesbarer und weniger komplex.
4. Flexibilität: Mit useEffect haben Sie mehr Kontrolle darüber, wann und wie oft Nebeneffekte ausgeführt werden, da Sie Abhängigkeiten definieren können, die bestimmen, wann der Effekt ausgeführt werden soll.

Wie funktioniert es?

Der useEffect-Hook akzeptiert zwei Argumente:

1. Effektfunktion: Diese Funktion enthält die Nebeneffektlogik, wie das Abrufen von Daten oder das Einrichten eines Abonnements.
2. Abhängigkeitsarray (optional): Ein Array von Werten, das bestimmt, wann der Effekt erneut ausgeführt werden soll. Wenn sich ein Wert im Abhängigkeitsarray ändert, wird der Effekt erneut ausgeführt. Wenn Sie dieses Array weglassen, wird der Effekt nach jedem Rendern ausgeführt.

Hier ist eine Grundstruktur:

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

Beispiel:

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

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

In diesem Beispiel werden die Daten von einer API abgerufen, wenn die Komponente zum ersten Mal gerendert wird, und das Ergebnis wird in der Benutzeroberfläche angezeigt. Da wir ein leeres Abhängigkeitsarray übergeben, wird dieser Effekt nur einmal nach dem ersten Rendern ausgeführt.

Kontrolle von Nebenwirkungen in useEffect

Durch die Kontrolle, wann useEffect ausgeführt wird, können wir die Leistung optimieren und sicherstellen, dass die Nebenwirkungen zum richtigen Zeitpunkt auftreten.

Effekte ohne Bereinigung

Nicht alle Effekte erfordern eine Bereinigung. Eine Bereinigung ist nur erforderlich, wenn Sie etwas entfernen oder zurücksetzen müssen, nachdem der Effekt ausgeführt wurde, z. B. das Löschen von Timern oder das Abbestellen von Datenströmen.

Hier ist beispielsweise ein Szenario, in dem keine Bereinigung erforderlich ist:

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

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

In diesem Fall wird der Effekt jedes Mal ausgeführt, wenn sich der Zählstatus ändert. Da wir keine Abonnements einrichten oder externe Ressourcen verwalten, ist keine Bereinigung erforderlich.

Effekte mit Bereinigung

Wenn Ihr Effekt das Einrichten von Abonnements oder Timern umfasst, müssen Sie wahrscheinlich nach dem Effekt aufräumen. Stellen Sie sich zum Beispiel ein Szenario vor, in dem wir einen Timer einrichten möchten:

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

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

Hier ist, was passiert:

1. Die Funktion setInterval richtet einen Timer ein, der die Zeit jede Sekunde erhöht.
2. Die Bereinigungsfunktion (zurückgegeben von useEffect) löscht das Intervall, wenn die Bereitstellung der Komponente aufgehoben wird. Dadurch wird sichergestellt, dass der Timer nach dem Entfernen der Komponente nicht weiterläuft.

AnwendungsbeispieleEffektszenarien

Lassen Sie uns einige häufige Szenarien untersuchen, in denen useEffect besonders nützlich ist.

Abrufen von Daten zur Komponentenmontage

Das Abrufen von Daten beim Mounten der Komponente ist einer der häufigsten Anwendungsfälle für useEffect.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

Aktualisieren des DOM

Sie können useEffect verwenden, um das DOM nach dem Rendern manuell zu manipulieren. Dies sollte jedoch sparsam erfolgen, da React das DOM effizient verwaltet.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

Bereinigung beim Unmounten der Komponente

Wenn Sie Ressourcen wie Abonnements oder Ereignis-Listener haben, die bereinigt werden müssen, können Sie die Rückgabefunktion in useEffect verwenden, um dies zu erledigen.

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

FAQs

1. Was passiert, wenn ich das Abhängigkeitsarray in useEffect weglasse?

Wenn Sie das Abhängigkeitsarray weglassen, wird useEffect nach jedem Rendern ausgeführt, was zu Leistungsproblemen durch teure Nebeneffekte wie API-Aufrufe führen kann.

2. Kann ich useEffect nur einmal ausführen?

Ja, die Übergabe eines leeren Abhängigkeitsarrays [] stellt sicher, dass der Effekt nur einmal ausgeführt wird, nachdem die Komponente gemountet wurde.

3. Was ist die Bereinigungsfunktion in useEffect?

Die Bereinigungsfunktion ist eine Möglichkeit, den Effekt rückgängig zu machen, wenn die Bereitstellung der Komponente aufgehoben wird oder bevor der Effekt erneut ausgeführt wird. Es ist nützlich zum Bereinigen von Timern, Ereignis-Listenern oder Abonnements.

Zusammenfassend lässt sich sagen, dass useEffect ein leistungsstarker und flexibler Hook ist, der die Verwaltung von Nebenwirkungen in React vereinfacht. Indem Sie steuern, wann Nebenwirkungen auftreten, und bei Bedarf bereinigen, können Sie Ihre Komponenten optimieren und unnötige erneute Renderings oder Speicherverluste vermeiden. Experimentieren Sie mit den obigen Beispielen, um die Kunst des Nebenwirkungsmanagements zu meistern!