Reaktionshaken: useEffect

Als ich das letzte Mal über den useState-Hook geschrieben habe, werde ich jetzt erklären, was der useEffect-Hook in React macht. Der Hook useEffect wurde entwickelt, um einige der Herausforderungen anzugehen, die durch Lebenszyklusmethoden von Komponenten der ES6-Klasse aufgeworfen werden. Wenn Sie Lebenszyklusmethoden von Klassenkomponenten verstehen, entspricht dieser Hook den Lebenszyklusmethoden componentDidMount, componentDidUpdate und componentDidUnmount. Ich werde ein Beispiel verwenden, das zeigt, wie Hooks den Platz dieser Lebenszyklusmethoden einnehmen können.

Lassen Sie uns zunächst einen Blick darauf werfen, wie useEffect aussieht. Dieser Hook ist eine Funktion, die zwei Argumente akzeptiert. Der erste ist ein Rückruf mit der darin enthaltenen Nebeneffektlogik. Das zweite ist ein optionales Array von Abhängigkeiten. Der Hook useEffect führt den Callback nur aus, wenn sich die Abhängigkeiten zwischen Renderings ändern. Auf diese Weise können Sie steuern, wann der Nebeneffekt ausgeführt wird. Schauen wir uns an, wie die Abhängigkeiten aussehen und was sie tun.

Wenn Sie kein Abhängigkeitsarray angeben, wird der Nebeneffekt nach jedem Rendern ausgeführt.

Wenn Sie ein leeres Array angeben, wird der Nebeneffekt erst nach dem anfänglichen Rendern ausgeführt, ähnlich wie bei „componentDidMount“.

Wenn Sie einen Status- oder Prop-Wert im Array angeben, wird der Nebeneffekt jedes Mal ausgeführt, wenn sich die Abhängigkeit ändert, ähnlich wie bei „componentDidUpdate“.

Machen wir ein Beispiel mit einem einfachen Programm. Meine Komponente wird eine Schaltfläche haben, die einen Zähler erhöht. Nachdem der Zähler eine bestimmte Zahl erreicht hat, ändert sich der Titel des Dokuments. Lassen Sie uns zuerst die Komponente mit dem Minimum einrichten. Es wird einen Zustand für den Zähler und eine Handler-Funktion haben.

Wie Sie sehen können, habe ich bereits eine useEffect-Funktion für diese Komponente. Auf der Konsole wird bei den Komponenten das initiale Rendern 'Mounted' protokolliert. Wenn auf die Schaltfläche geklickt wird, erhöht sich die Zahl um 1. Perfekt, sagen wir jetzt, wir wollen jedes Mal, wenn die Komponente rendert, etwas Konsolenprotokollieren, aber nicht beim anfänglichen Rendern. Das Beste an Hooks ist, dass Sie mehrere Hooks in derselben Komponente haben können. Ich werde einige bedingte Anweisungen haben, um zu steuern, wann der Effekt ausgeführt wird. Es wird so aussehen.

Ich habe eine auf false gesetzte Variable erstellt, die verhindert, dass der Effekt beim ersten Rendern ausgelöst wird. Danach können Sie jedes Mal, wenn der Zähler erhöht wird, sehen, dass die Konsole korrekt druckt. Dies liegt daran, dass dieser Hook kein Abhängigkeitsargument hatte, sodass er jedes Mal gerendert wird, wenn sich der Status ändert. Lassen Sie uns nun einen Filter implementieren, der den Titel des Dokuments ändert, nachdem eine bestimmte Zahl im Zähler erreicht wurde. Dazu muss ich einen anderen State-Hook verwenden und eine weitere bedingte Anweisung setzen.

Wenn der Zähler jetzt 11 erreicht, wird der Titel des Dokuments aktualisiert. Dies liegt daran, dass, sobald die Bedingung erfüllt ist, der Filterstatuswert auf wahr geändert wird und der Hook ausgeführt wird. Es gibt noch eine Sache, die wir mit useEffect machen können. Einige Nebeneffekte müssen bereinigt werden, z. B. das Löschen von Timern. Wenn ein Callback eine Funktion zurückgibt, betrachtet der Hook dies als eine Effektbereinigung.

Sie werden sehen, dass die Bereinigung nach jedem Rendern ausgeführt wird. Dies ähnelt dem, was Sie in Klassenkomponenten mit componendDidUnmount tun können.

Es hat mir viel Spaß gemacht, diesen Haken zu lernen. Dies ist einer der wichtigsten Haken und auch einer der kniffligeren. Nach einiger Übung damit macht es jedoch so viel Sinn. Nun, das ist alles für useEffect. Viel Spaß beim Codieren!