Eine umfassende Anleitung zum useEffect Hook von React: Verwalten von Nebenwirkungen in Funktionskomponenten

Effect Hook in React verwenden

Der useEffect-Hook ist einer der mächtigsten und wichtigsten Hooks in React. Es ermöglicht Ihnen, Nebenwirkungen in Ihren Funktionskomponenten auszuführen. Zu den Nebenwirkungen können Dinge wie das Abrufen von Daten, manuelle DOM-Manipulation, das Einrichten von Abonnements und das Bereinigen von Ressourcen gehören, wenn eine Komponente ausgehängt oder aktualisiert wird.

Vor der Einführung von Hooks wurden Nebenwirkungen durch Lebenszyklusmethoden wie „componentDidMount“, „componentDidUpdate“ und „componentWillUnmount“ in Klassenkomponenten behandelt. useEffect konsolidiert alle diese Lebenszyklusmethoden in einer, wodurch es einfacher wird, mit Nebenwirkungen in Funktionskomponenten zu arbeiten.

---

Was ist useEffect?

Der useEffect-Hook wird verwendet, um Nebenwirkungen in React-Komponenten auszuführen. Es wird nach dem Rendern ausgeführt und kann mit Abhängigkeiten so gesteuert werden, dass es nur ausgeführt wird, wenn sich bestimmte Werte ändern.

Syntax:

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• Effektfunktion: Das erste Argument ist eine Funktion, bei der der Nebeneffekt ausgeführt wird.
• Bereinigungsfunktion: Wenn Sie eine Funktion vom Effekt zurückgeben, wird sie ausgeführt, wenn die Bereitstellung der Komponente aufgehoben wird oder bevor der Effekt erneut ausgeführt wird (nützlich für die Bereinigung).
• Dependencies Array: Das zweite Argument ist ein optionales Array von Abhängigkeiten. Der Effekt wird nur ausgeführt, wenn sich die Werte in diesem Array ändern.

---

Schlüsselkonzepte:

1. Nach jedem Rendern einen Effekt ausführen:

Wenn kein Abhängigkeitsarray bereitgestellt wird, wird der Effekt nach jedem Rendern der Komponente ausgeführt.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• Erklärung:In diesem Fall wird der Effekt jedes Mal ausgeführt, wenn die Komponente erneut gerendert wird.

2. Einmaliges Ausführen eines Effekts (beim Montieren):

Wenn Sie ein leeres Abhängigkeitsarray ([]) übergeben, wird der Effekt nur einmal nach dem ersten Rendern ausgeführt (ähnlich wie „componentDidMount“ in Klassenkomponenten).

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• Erklärung: Hier wird der Effekt nur einmal ausgeführt, wenn die Komponente gemountet wird (erstes Rendern).

3. Ausführen eines Effekts auf bestimmte Abhängigkeiten:

Wenn Sie ein Array von Abhängigkeiten übergeben (z. B. [count]), wird der Effekt immer dann ausgeführt, wenn sich ein Wert in diesem Array ändert.

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• Erklärung: Der Effekt wird immer dann ausgeführt, wenn sich der Zählwert ändert. Jedes Mal, wenn auf die Schaltfläche geklickt wird, aktualisiert setCount den Status, löst ein erneutes Rendern aus und führt den Effekt erneut aus.

4. Bereinigungsfunktion:

Wenn Ihr Effekt Nebenwirkungen erzeugt, die bereinigt werden müssen (z. B. Abonnements, Timer usw.), können Sie eine Bereinigungsfunktion vom Effekt zurückgeben. Diese Funktion wird ausgeführt, bevor der Effekt erneut ausgeführt wird oder wenn die Komponente ausgehängt wird.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• Erklärung: Der useEffect-Hook richtet einen Timer ein, wenn die Komponente bereitgestellt wird, und die Bereinigungsfunktion (clearInterval) wird aufgerufen, wenn die Komponente nicht bereitgestellt wird, um Speicherlecks zu verhindern.

5. Bedingte Effekte:

Sie können steuern, wann der Effekt ausgeführt werden soll, indem Sie das Abhängigkeitsarray verwenden. Der Effekt wird nur ausgeführt, wenn sich einer der Werte im Array ändert.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• Erklärung: Diese Komponente verfügt über zwei useEffect-Hooks. Einer wird ausgeführt, wenn sich die Anzahl ändert, und der andere wird ausgeführt, wenn sich der Name ändert.

---

Häufige Anwendungsfälle für useEffect:

1. Datenabruf: useEffect wird häufig zum Senden von API-Anfragen oder zum Abrufen von Daten verwendet, wenn die Komponente bereitgestellt wird oder wenn sich bestimmte Abhängigkeiten ändern.

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

const Component = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs when count changes:', count);
  }, [count]); // Dependency on count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

1. Externe Ereignisse abonnieren: Zum Beispiel einen WebSocket abonnieren oder einen Ereignis-Listener hinzufügen.

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

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

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

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, []); // Empty dependency array to run once on mount

  return <div>Time: {time}</div>;
};

1. Timer und Intervalle: Einrichten und Bereinigen von Timern und Intervallen.

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

const Component = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  useEffect(() => {
    console.log(`Effect runs when 'count' changes: ${count}`);
  }, [count]); // Only runs when count changes

  useEffect(() => {
    console.log(`Effect runs when 'name' changes: ${name}`);
  }, [name]); // Only runs when name changes

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName(name === 'Alice' ? 'Bob' : 'Alice')}>Change Name</button>
    </div>
  );
};

---

Zusammenfassung der Verwendungswirkung:

• useEffect wird verwendet, um Nebenwirkungen in Funktionskomponenten auszuführen.
• Sie können steuern, wann der Effekt ausgeführt wird, indem Sie ein Abhängigkeitsarray übergeben.
• Es kann nach jedem Rendern ausgeführt werden, einmal beim Mounten oder wenn sich bestimmte Werte ändern.
• Mit Bereinigungsfunktionen können Sie Ressourcen bereinigen (z. B. Timer löschen, API-Anfragen abbrechen), wenn die Bereitstellung der Komponente aufgehoben wird oder bevor der Effekt erneut ausgeführt wird.
• Häufige Anwendungsfälle umfassen das Abrufen von Daten, Ereignis-Listener und Timer.

---

Fazit

Der useEffect-Hook ist einer der wichtigsten Hooks in React und ermöglicht Ihnen den deklarativen Umgang mit Nebenwirkungen. Es vereinfacht den Code durch die Konsolidierung mehrerer Lebenszyklusmethoden in einer und bietet mehr Flexibilität und Kontrolle darüber, wann und wie Effekte in Ihren Komponenten ausgeführt werden.

---

Das obige ist der detaillierte Inhalt vonEine umfassende Anleitung zum useEffect Hook von React: Verwalten von Nebenwirkungen in Funktionskomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!