UseState- und UseEffect-Hook in React

In React sind useState und useEffect zwei grundlegende Hooks, die zum Verwalten des Status und zum Umgang mit Nebenwirkungen in Funktionskomponenten verwendet werden.

1. Verwenden Sie den State Hook

Mit dem useState-Hook können Sie Funktionskomponenten einen Status hinzufügen. Es gibt ein Array mit zwei Elementen zurück:

1. Der aktuelle Statuswert.
2. Eine Funktion zum Aktualisieren dieses Statuswerts.

Beispiel:

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Update state using the setCount function */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

In diesem Beispiel:

• useState(0) initialisiert die Zählstatusvariable mit dem Wert 0.
• setCount wird verwendet, um den Status zu aktualisieren, wenn auf die Schaltfläche geklickt wird.

2. Verwenden Sie den Effekthaken

Mit dem useEffect-Hook können Sie Nebeneffekte in Ihren Komponenten ausführen, z. B. das Abrufen von Daten, Abonnements oder das manuelle Ändern des DOM. Es sind zwei Argumente erforderlich:

1. Eine Funktion, die die Nebeneffektlogik enthält.
2. Ein optionales Array von Abhängigkeiten, das bestimmt, wann der Effekt ausgeführt werden soll.

Beispiel:

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

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

  // useEffect runs after every render, but the dependency array makes it run only when `count` changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Cleanup function (optional)
    return () => {
      console.log('Cleanup for count:', count);
    };
  }, [count]); // Dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Example;

In diesem Beispiel:

• useEffect aktualisiert den Dokumenttitel, wenn sich die Anzahl ändert.
• Der Effekt wird nach jedem Rendern ausgeführt, wenn sich die Anzahl ändert, da die Anzahl im Abhängigkeitsarray enthalten ist.
• Die optionale Bereinigungsfunktion wird ausgeführt, bevor der Effekt erneut ausgeführt wird oder wenn die Bereitstellung der Komponente aufgehoben wird. Dies ist nützlich zum Bereinigen von Abonnements oder Timern.

Beide Hooks helfen dabei, Zustands- und Nebenwirkungen in Funktionskomponenten effektiv zu verwalten, wodurch die React-Entwicklung prägnanter und leistungsfähiger wird.
.
.
.

Lassen Sie uns zusammenfassen....
.
.
.

Hier ist eine Zusammenfassung der useState- und useEffect-Hooks in React:

useState Hook

• Zweck: Verwaltet den Zustand in Funktionskomponenten.
• Syntax: const [state, setState] = useState(initialValue);
• Parameter:
  • initialValue: Der Anfangszustandswert.
• Rücksendungen:
  • Ein Array mit zwei Elementen:
  • Zustand: Der aktuelle Zustandswert.
  • setState: Funktion zum Aktualisieren des Status.

Beispielverwendung:

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

useEffect Hook

• Zweck: Behandelt Nebenwirkungen in Funktionskomponenten, wie z. B. Datenabruf, Abonnements oder manuelle DOM-Updates.
• Syntax: useEffect(() => { /* effectlogic */ }, [dependencies]);
• Parameter:
  • Effektfunktion: Enthält den Code, der als Nebeneffekt ausgeführt werden soll.
  • Abhängigkeitsarray (optional): Liste der Abhängigkeiten, die bei Änderung den Effekt auslösen. Wenn leer, wird der Effekt nach dem ersten Rendern nur einmal ausgeführt. Wenn es weggelassen wird, wird der Effekt nach jedem Rendern ausgeführt.
• Bereinigungsfunktion (optional): Von der Effektfunktion zurückgegebene Funktion zum Bereinigen von Ressourcen.

Beispielverwendung:

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => {
    // Cleanup logic here
  };
}, [count]);

Wichtige Punkte:

• useState vereinfacht die Zustandsverwaltung in Funktionskomponenten.
• useEffect behandelt Nebenwirkungen und kann optional nach sich selbst aufräumen.
• Beide Hooks arbeiten zusammen, um dynamische, zustandsbehaftete Funktionskomponenten in React zu erstellen.

Das obige ist der detaillierte Inhalt vonUseState- und UseEffect-Hook in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!