UseEffect Hinter den Kulissen in React

Bevor Sie mehr über useEffect und ein tiefes Verständnis von React erfahren. Ich empfehle Ihnen, sich mit diesen Konzepten von Javascript vertraut zu machen.

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

Als React-Entwickler ist es eines der wichtigsten Konzepte, zu verstehen, wie useEffect funktioniert.

Prinzipien von useEffect

UseEffect wird verwendet, um Nebenwirkungen in unserer Reaktionskomponente auszuführen.

Was ist eine Nebenwirkung?

Ein Nebeneffekt bezieht sich auf jede Operation, die mit der Welt außerhalb der Grenzen einer React-Komponente interagiert.

Wir führen einen Nebeneffekt aus, wenn wir außerhalb einer Reaktionskomponente greifen müssen, um etwas zu tun!!

Einige häufige Nebenwirkungen:

• Daten von der API abrufen.
• Aktualisierung des DOM-Dokuments und -Fensters.
• Timerfunktionen setTimeout und setInterval.

Die Signatur von useEffect in reagieren:

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

Oder funktioniert nur mit diesem Code:

useEffect(() => { 
    // execute side effect
})

Nachdem wir einige grundlegende Theorien zu useEffect dargelegt haben, werfen wir einen Blick auf die Praxis!!

Ein einfaches Beispiel mit useEffect:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

Was machen wir in diesem Code?

• Die Komponente wird zunächst mit der Anzahl auf 0 gerendert.

• Der useEffect-Hook aktualisiert den Dokumenttitel auf „0 neue Nachrichten!“

Wenn auf die Schaltfläche geklickt wird:

• Die Funktion setCount wird aufgerufen und erhöht den Zählstatus.
• Die Komponente wird mit dem aktualisierten Zählwert erneut gerendert.
• Der useEffect-Hook wird erneut ausgelöst und aktualisiert den Dokumenttitel, um die neue Anzahl widerzuspiegeln.
• Dieser Code demonstriert die grundlegende Verwendung der useState- und useEffect-Hooks in React, um den Status zu verwalten und Nebenwirkungen auszuführen und einen einfachen Zähler zu erstellen, der den Dokumenttitel aktualisiert.

Der useEffect wird bei jeder einzelnen Änderung der Komponente ausgeführt.

UseEffect mit leerem Array

Wir werden eine kleine Änderung am Code vornehmen:

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

Wir fügen ein leeres Array in den Parametern von useEffect hinzu.

• Es wird nur ausgeführt, wenn die Komponente erstellt oder initialisiert wird.

Es ist sehr nützlich, wenn wir Daten abrufen. In diesem Fall wissen wir, dass wir den Teil des Codes nur einmal ausführen sollten.

useEffect mit Variablen

Eine Variante von useEffect ist das Hinzufügen einer Variablen (einer oder mehrerer).
Wenn sich diese Variable ändert, wird der Teil des Codes ausgeführt.

Sehen wir uns ein Beispiel an:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

Wir haben eine neue Variable mit useState und useEffect abhängig von newCount hinzugefügt.

In diesen Fällen wird Folgendes gerendert:

• Am Anfang der Komponente, um newCount auf den Titel der Seite zu setzen.
• Nachdem die Änderung an newCount var erkannt wurde.

Hinweis: Sie können weitere Variablen durch Komma übergeben

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

UseEffect mit CleanUp-Funktion

In einigen Fällen müssen wir einige Funktionen wie Versprechen bereinigen.

Wir gehen anhand eines Beispiels näher darauf ein.

Erstellen Sie einen Timer und zeigen Sie ihn auf der Seite an.

Wir können dies mit setInterval tun, aber wenn wir die Bereinigung nicht implementieren, verbraucht der Timer Ressourcen und die App wird langsam sein.

Also müssen wir das klare Intervall zurückgeben.

Hier haben wir den Code.

useEffect(() => { 
    // execute side effect
})

Fazit:

Eine kurze Beschreibung von useEffect.

useEffect.-

UseEffect wird verwendet, um Nebenwirkungen in einer Reaktionskomponente auszuführen.

Die Nebenwirkungen könnten sein:

• Daten von der API abrufen
• Dom-Dokument, Fenster aktualisieren
• Timer-Ereignisse – setInterval, setTimeOut

useEffect(callback, dependencies)

1 Wobei Callback die Funktion ist – SideEffect-Logik – Was ausgeführt werden soll.
2 Abhängigkeiten – Array von Variablen (optional) – Wann ausgeführt werden soll.

Schließlich haben wir drei Variationen von useEffect:

1. UseEffect ohne Abhängigkeiten – Es wird beim ersten Rendern ausgeführt und auch bei allen erkannten Änderungen.

2. UseEffect mit leerem Array – Wird nur beim ersten Rendern ausgeführt.

3. UseEffect mit Variablen – Es wird beim ersten Rendern ausgeführt und läuft bei diesen Variablenänderungen.

4. UseEffect mit Bereinigungsfunktion – Zeitüberschreitungen, Abonnements, Ereignis-Listener oder andere Funktionen, die Sie abbestellen oder nicht benötigen, können nach der Verwendung mit Bereinigungsfunktionen entsorgt werden.

Das obige ist der detaillierte Inhalt vonUseEffect Hinter den Kulissen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!