Reagieren: Wie oft wird eine Bereinigungsfunktion ausgeführt?

Reaktionskomponenten mit Zustandsvariablen lösen ein erneutes Rendern aus, wenn diese Variablen aktualisiert werden. Dies wird erwartet und ist eine der Kernfunktionen von React. Darüber hinaus bieten Komponenten eine Bereinigungsfunktion, die jedes Mal ausgelöst wird, wenn die Komponente „ausgehängt“ wird. Aber wie oft wird diese Bereinigungsfunktion tatsächlich ausgeführt?

Nun, wie wir in dieser Demo untersuchen werden, kann die Bereinigungsfunktion mehrere Auslöser haben, aber ein häufiger Auslöser sind Aktualisierungen einer Statusvariablen, wenn sie mit einem Nebeneffekt verknüpft ist.

Kurz gesagt: Wenn Ihre React-Komponente useEffect verwendet und einer bestimmten Statusvariablen folgt, schauen wir uns das folgende Beispiel an:

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

Die Bereinigungsfunktion wird jedes Mal aufgerufen, wenn der Zähler aktualisiert wird.

Wenn eine Zustandsvariable aktualisiert wird, rendert React die Komponente neu, was bedeutet, dass sie zuerst „entfernt“ und dann erneut „gerendert“ werden muss. Während das virtuelle DOM optimiert, welche Knoten aktualisiert werden müssen, wird auf der Logikebene weiterhin die Bereinigungsfunktion aufgerufen.

In den meisten Fällen ist das in Ordnung und wird erwartet. Wenn Ihre Bereinigungsfunktion jedoch beispielsweise Ereignisse meldet, Listener entfernt usw., stellen Sie sicher, dass dies beabsichtigt ist, da die Bereinigungsfunktion basierend auf der Statusvariablen mehrmals aufgerufen wird.

Demo

Sehen wir uns eine Demo an.

• Öffnen Sie in den Entwicklertools die Konsole.
• Sie werden zwei Protokolle bemerken:

Child mounted
Page mounted

Das bedeutet, dass beide Komponenten, Seite und Kind, gerendert wurden.

• Wenn Sie sich an den oben geteilten Ausschnitt erinnern, ist useEffect an den Zähler gebunden, der beim Klicken auf die erste Schaltfläche erhöht wird. Im Moment sollte dort stehen: Inkrement 0. Lass uns fortfahren und darauf klicken.

• Behalten Sie die Konsole im Auge und sehen Sie, wie vier Protokolle hinzugefügt wurden:
  

Child unmounted
Page unmounted
Child mounted
Page mounted

Der Statusvariablenzähler wurde aktualisiert, und da zwei useEffect-Hooks an den Zähler gebunden sind, bedeutet dies, dass ihre Bereinigungsfunktionen ausgeführt wurden. Beachten Sie, dass useEffect für die Page-Komponente an die Statusvariable gebunden ist, während für die Child-Komponente der Nebeneffekt an eine Prop-Variable gebunden ist, wobei die Quelle immer noch dieselbe Counter-State-Variable ist.

Zusätzlich sehen Sie die Schaltfläche Flag Off, die eine weitere Statusvariable aktualisiert, die nicht mit useEffect verknüpft ist. Das bedeutet, dass Klicks auf diese Schaltfläche die Bereinigungsfunktion nicht auslösen.

Abschluss

Bereinigungsfunktionen werden in React häufig verwendet, insbesondere um Dinge zu melden, sobald die Komponente „fertig“ ist. Seien Sie jedoch vorsichtig, wenn Sie useEffect an eine Zustandsvariable binden. Wie in der Demo zu sehen ist, führt dies dazu, dass die Bereinigungsfunktion jedes Mal aufgerufen wird, wenn die Statusvariable aktualisiert wird, was möglicherweise nicht erwartet wird.

Meistens ist die Bereinigungsfunktion in einem useEffect ohne Statusvariablen untergebracht.

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

Es ist in Ordnung, mehrere useEffect-Hooks in einer Komponente zu haben. In diesem Fall könnten Sie einen haben, der auf eine Zustandsvariable reagiert, und einen anderen, der die Bereinigungsfunktion festlegt.

Child mounted
Page mounted

Um die Frage zu beantworten: Die Bereinigungsfunktion wird aufgerufen, wenn die Komponente ausgehängt wird. Dies kann passieren, wenn der Benutzer zu einem anderen Abschnitt der App navigiert, oder wenn useEffect von einer Statusvariablen abhängt, wird es N-mal aufgerufen, wenn diese Statusvariable aktualisiert wird.

Das obige ist der detaillierte Inhalt vonReagieren: Wie oft wird eine Bereinigungsfunktion ausgeführt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!