Fallstricke von UseEffect für React-Programmierer

Oh, ich erinnere mich, wie begeistert die React-Community war, als sie in Version 16.8 erschienen. Entwickler waren von ihnen besessen – sie experimentierten mit benutzerdefinierten Hooks und waren bereit, alle ClassKomponenten neu zu schreiben und von einer neuen Seite zu beginnen.

Es gibt viele Beispiele im Internet, in denen Menschen zeigen, wie großartig Hooks sind und wie sie unser Leben vereinfachen, indem sie das Extrahieren gemeinsamer Logik ermöglichen. Dennoch sollten wir bedenken, dass Hooks unseren Code extrem unlesbar und unvorhersehbar machen können, wenn wir sie missbrauchen.

Versteh mich nicht falsch, ich liebe Haken und ich habe viele benutzerdefinierte, die ich oft benutze. Aber leider sehe ich bei der Arbeit oft, wie neue React-Programmierer damit kämpfen, zu verstehen, warum useEffectEndlosschleifen verursacht werden, oder wie sie mit ihrem Abhängigkeitsarray richtig umgehen sollen.

Hier sind die häufigsten Schwierigkeiten, denen Sie bei der Verwendung begegnen können useEffect.

Lassen Sie sich von ESLint helfen

Eines der wesentlichen Dinge useEffectist das Abhängigkeitsarray. Es definiert, wie useEffectes sich verhalten wird – Trigger beim Mounten der Komponente, Ändern eines Werts im Zustand oder sogar bei jedem Rendern.

Verhält sich manchmal useEffectaufgrund falscher Abhängigkeiten unvorhersehbar. Um diese Situationen zu vermeiden, verwenden Sie eslint-plugin-react-hooks, da wir nicht über Abhängigkeiten lügen wollen.

Zum Beispiel habe ich eine elementare Komponente, die einen Text von Requisiten erhält und versucht, Artikel anhand des angegebenen Textes abzurufen. Ich möchte Daten erhalten, wenn die Komponente zum ersten Mal bereitgestellt wird. Dafür brauche ich useEffectein leeres Abhängigkeitsarray.

Der Aufruf getArticlesvon useEffecterstellt eine Warnung, da getArticlesder Wert von props verwendet wird.

Zu viel.

OK, also lügen wir nicht über Abhängigkeiten und stimmen zu, alle notwendigen Variablen und Funktionen zur Liste hinzuzufügen. Und was bekommen wir?

Oh, noch eine Warnung!

useEffectAufgrund unserer Nachricht wird unsere Funktion also bei jedem erneuten Rendern neu erstellt, das den Hook auslösen könnte . das ist nicht das, was wir brauchen, also ist die Frage – wie kann man das beheben?

Hier haben wir folgende Möglichkeiten:

1. Um eine Funktion innerhalb von useEffect.
2. Um die Funktion in einen useCallbackHook zu packen.

Endlosschleife

Leider kommt diese Situation sehr oft vor. Zum Beispiel useEffectversuchen wir innerhalb von , einen Wert im Zustand basierend auf seinem vorherigen Wert zu ändern und müssen diesen Wert zum Abhängigkeitsarray hinzufügen.

Und dann erhalten wir eine Endlosschleife, weil useEffectsie nach jedem erneuten Rendern ausgelöst wird und erkennt, dass der Wert aus dem Status geändert wird, also versucht er, ihn wiederholt zu ändern. Das klingt einfach und logisch, ist aber für viele Programmierer ein Fallstrick.

Was können wir tun?

1. Aktualisieren Sie den Status über eine Funktion aus dem useStateHook-in useEffectohne Abhängigkeiten.
2. Verwenden Sie den Versand vom useReducerHook, um den Status zu aktualisieren.

Der einfachste Weg, den Status der Komponente zu steuern, ist die Verwendung des useStateHooks, aber wenn Ihr Status komplizierter wird, müssen Sie es useReducerstattdessen versuchen. Die Syntax ist sehr ähnlich zu useState, aber Sie haben eine Funktion, mit der Sie definieren können, wie sich der Zustand der Komponente in verschiedenen Fällen ändert.

Erstens ist es einfacher zu definieren, wie sich der Zustand in Abhängigkeit von Aktionen ändert. Verwenden Sie zweitens die dispatchFunktion, die während des erneuten Renderns nicht geändert wird. Dies ist vorteilhaft, wenn Sie Abhängigkeitsarrays verwenden.

Wichtig zu merken

1. useRefund dispatchändern Sie sich nicht während des erneuten Renderns. Aus diesem Grund können Sie sie sicher in useEffectund useCallbackohne Stress verwenden, um unnötige Neuberechnungen zu provozieren.
2. Sie können so viele useEffectHaken haben, wie Sie brauchen; Es ist besser, die Dinge nicht zu verkomplizieren und nicht zu versuchen, alle mögliche Logik in eine Runde zu bringen. Es ist schwer zu lesen und zu testen.
3. Eine Folge von useEffectHooks ist import. Sie werden nacheinander ausgelöst.
4. Funktionen und Variablen, die außerhalb von Komponenten (nicht von Props) definiert werden, lösen niemals den useEffectHook aus, und Sie müssen sie nicht zum Abhängigkeitsarray hinzufügen.
5. Wenn Ihr useEffectHook eine Funktion im Abhängigkeitsarray benötigt und Sie sie nicht im useEffectHauptteil definieren können, dann wickeln Sie sie mit ein useCallback. Wenn es von Requisiten kommt, muss dieses Wrapping dort erfolgen, wo die Funktion definiert ist.

Sehen Sie sich auch die React-Dokumentation an . Diese Version ist fantastisch. Sie können viele hilfreiche Informationen finden.

Das ist alles über die Verwaltung useEffectvon Abhängigkeiten. Ich hoffe, diese Tipps sind hilfreich.