Der useEffect-Hook ist ein grundlegender Bestandteil von React und ermöglicht es Ihnen, Nebenwirkungen in Funktionskomponenten auszuführen. Hier ist eine detaillierte Aufschlüsselung:

Was ist useEffect?

• Mit dem useEffect-Hook können Sie Nebeneffekte in Ihren Komponenten ausführen, z. B. Datenabruf, Abonnements oder manuelles Ändern des DOM.
• Es kann als eine Kombination der Lebenszyklusmethoden „componentDidMount“, „componentDidUpdate“ und „componentWillUnmount“ betrachtet werden.

Syntax

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

Parameter

1. Effektfunktion: Das erste Argument ist eine Funktion, die den Nebeneffektcode enthält. Diese Funktion wird ausgeführt, nachdem das Rendering auf dem Bildschirm festgeschrieben wurde.

2. Bereinigungsfunktion (optional): Die Effektfunktion kann eine Bereinigungsfunktion zurückgeben, die React aufruft, wenn die Bereitstellung der Komponente aufgehoben wird oder bevor der Effekt erneut ausgeführt wird. Dies ist nützlich zum Bereinigen von Abonnements oder Timern.

3. Dependencies Array: Das zweite Argument ist ein Array von Abhängigkeiten. Der Effekt wird nur ausgeführt, wenn sich eine der Abhängigkeiten ändert. Wenn Sie ein leeres Array ([]) übergeben, wird der Effekt nur einmal nach dem ersten Rendern ausgeführt (wie „componentDidMount“).

Anwendungsbeispiele

1. Grundlegendes Beispiel: Daten vom Mount abrufen

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

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. Bereinigungsbeispiel: Abonnieren einer Veranstaltung

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. Abhängigkeitsbeispiel: Ausführen eines Effekts basierend auf einer Requisitenänderung

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

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

Best Practices

• Abhängigkeiten angeben: Fügen Sie immer die Variablen, von denen Ihr Effekt abhängt, in das Abhängigkeitsarray ein, um veraltete Schließungen zu vermeiden.
• Nebenwirkungen beim Rendern vermeiden: Nebenwirkungen aus der Renderphase fernhalten; Verwenden Sie stattdessen useEffect.
• Bereinigungsfunktionen verwenden: Wenn Ihr Effekt Abonnements oder Timer erstellt, geben Sie immer eine Bereinigungsfunktion zurück, um Speicherverluste zu vermeiden.

Abschluss

Der useEffect-Hook ist ein leistungsstarkes Tool zur Behandlung von Nebenwirkungen in Funktionskomponenten und daher für die moderne React-Entwicklung unerlässlich. Durch das Verständnis der Syntax und Best Practices können Sie das Komponentenverhalten und die Nebenwirkungen effektiv verwalten.