React useEffect verstehen und verwenden

Die neue useEffec-Hook-Funktion in React16.8 wird zum Behandeln von Nebeneffekten verwendet.

Um ein einfaches Beispiel der sogenannten „Nebenwirkungen“ zu geben: Sie haben eine Erkältung und die Einnahme eines bestimmten Arzneimittels wäre in Ordnung, doch nach der Einnahme stellen Sie fest, dass Ihr Körper allergisch darauf reagiert, und diese „Allergie“ ist die Nebenwirkung.

In React wollten wir ursprünglich nur das DOM rendern und auf der Seite anzeigen, aber zusätzlich zum DOM gibt es auch Daten, und diese Daten müssen aus einer externen Datenquelle bezogen werden. Der Prozess „Beziehen der externen Datenquelle“ ist ein Nebeneffekt.

Informationen zur Verwendung von useEffect finden Sie in den Beispielen auf der offiziellen Website. Hier fassen wir hauptsächlich die Probleme zusammen, die bei der Verwendung von useEffect auftreten.

Vermeiden Sie sich wiederholende Rendering-Schleifen

Verwenden Sie useEffect, um ein Array als zweiten Parameter zu erhalten, und verwenden Sie den zweiten Parameter als Abhängigkeit. Jedes Mal, wenn das DOM gerendert und die Nebeneffektfunktion ausgeführt wird, wird ein oberflächlicher Vergleich durchgeführt, um festzustellen, ob die Werte vor und nach dem Rendern der Abhängigkeit konsistent sind. Wenn sie inkonsistent sind, wird der Nebeneffekt ausgeführt, andernfalls wird er nicht ausgeführt. Wenn die Abhängigkeit ein leeres Array [] ist, d. h. es wird keine zu vergleichende Variable übergeben, bleibt das Vergleichsergebnis immer unverändert und die Nebeneffektlogik kann nur einmal ausgeführt werden.

useEffect(() => {
  setzeTimeout(() => {    
        setzeZähler(Zähler + 1);  
    }, 300)
}, []);

Wenn wir darüber hinaus durch Klicken auf die Schaltfläche „Aktualisieren“ externe Daten abrufen möchten, aber keine Endlosschleife verursachen möchten, können wir eine Variable als „Schalter“ verwenden, um das Ziel zu erreichen und gleichzeitig das zyklische Rendern des DOM zu vermeiden.

Es ist zu mühsam, animierte Bilder zu zeichnen. Lesen Sie bitte die Anmerkungen und nutzen Sie Ihre Fantasie 😂

function App() { const [count, setCount] = useState(0); const [loading, setLoading] = useState(true); // loading als Schalter useEffect(() => { if (loading) { // Beachten Sie, dass dies nur ausgeführt wird, wenn loading true ist setTimeout(() => { setCount(count + 1); setLoading(!loading); // Ladewert ändern }); } }, [loading]); // loading wird hier als Abhängigkeit verwendet
  // Nachdem das erste DOM-Rendering abgeschlossen ist, ist das Laden wahr, die Nebeneffektfunktion wird ausgeführt, der Zählwert wird 1 und das Laden wird falsch. Da // der Statuswert geändert wird, wird er aktualisiert und die Komponente wird erneut gerendert, aber das Laden ist zu diesem Zeitpunkt falsch und setTimeout wird nicht ausgeführt.
  // Schleife vermeiden // Wenn Sie auf Aktualisieren klicken, ändert sich das Laden von false auf true und die Funktion führt ein Update aus
  // Nachdem das DOM aktualisiert wurde, wird useEffect ausgeführt. Da das Laden bereits wahr ist, kann die Nebeneffektfunktion ausgeführt werden und count ändert sich von 1 auf 2.
  // Das Laden ändert sich wieder von „true“ auf „false“ und so weiter. . .
  return ( <div> <h3>{count}</h3> <button onClick={() => { setLoading(true); }} > Aktualisieren </button> </div> );}

Zur Beseitigung von Nebenwirkungen

useEffect kann eine Funktion zum Bereinigen der Nebenwirkungen zurückgeben.

  useEffect(() => {    
    ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);  
    Funktion löschen(){
        ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
    }  
    Rückkehr klar;
});

Dabei handelt es sich um den Prozess der useEffect-Ausführung und -Zerstörung:

1. Geben Sie props.id = 1 ein.
2. Komponenten-Rendering
3. Das DOM-Rendering ist abgeschlossen, die Nebeneffektfunktion wird ausgeführt und die Clear-Nebeneffektfunktion clear wird mit dem Namen clear1 zurückgegeben.
4. Geben Sie props.id=2 ein.
5. Komponenten-Rendering
6. Das DOM-Rendering ist abgeschlossen. Führen Sie „clear1“ aus.
7. Die Nebeneffektfunktion wird ausgeführt und gibt eine weitere Löschfunktion namens clear2 zurück.
8. Komponente zerstört, Clear2 ausgeführt
   

Daraus können wir die Eigenschaften der Nebeneffekt-Bereinigungsfunktion ableiten:

• Jede Nebeneffektausführung gibt eine Bereinigungsfunktion zurück
• Die Bereinigungsfunktion wird ausgeführt, bevor die nächste Nebeneffektfunktion ausgeführt wird (nachdem das DOM-Rendering abgeschlossen ist).
• Die Komponentenzerstörung führt auch eine Bereinigungsfunktion aus
  

Aus dem gedruckten Zählwert ist auch ersichtlich, dass die Löschfunktion ausgeführt wird, bevor die nächste Nebeneffektfunktion ausgeführt wird, d. h. der Zählwert in der Löschfunktion ist der Zählwert des letzten Caches:

Wenn man weiter darüber nachdenkt: Wenn clear1 ausgeführt wird, wird auf props.id zugegriffen. Ist der Wert dieser ID also 1 oder 2?

Dies betrifft das Konzept von Closures, da useEffect eine Funktion zurückgibt, die bei Ausführung einen Closure generiert. Gemäß der Definition von Closure kann die zurückgegebene Clear-Funktion auf Variablen außerhalb ihres eigenen Gültigkeitsbereichs zugreifen. Wenn die Komponente zum ersten Mal gerendert wird, wird id=1 übergeben und der Wert von props.id in der Clear-Funktion ist 1.

Das Obige ist der detaillierte Inhalt zum Verständnis und zur Verwendung von React useEffect. Weitere Informationen zu React useEffect finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!