Lebenszyklus reaktiver Effekte

Effekte haben einen anderen Lebenszyklus als Komponenten. Komponenten können gemountet, aktualisiert oder ungemountet werden. Ein Effekt kann nur zwei Dinge tun: etwas zu synchronisieren beginnen und später die Synchronisation stoppen. Dieser Zyklus kann mehrmals durchlaufen werden, wenn Ihr Effekt von Props und State abhängt, die sich im Laufe der Zeit ändern. React stellt eine Linter-Regel bereit, um zu überprüfen, ob Sie die Abhängigkeiten Ihres Effekts korrekt angegeben haben. Dies hält Ihren Effekt mit den neuesten Props und dem neuesten State synchronisiert.

Der Lebenszyklus eines Effekts

Jede React-Komponente durchläuft denselben Lebenszyklus:

• Eine Komponente wirdgemountet, wenn sie zum Bildschirm hinzugefügt wird.
• Eine Komponente wirdaktualisiert, wenn sie neue Props oder einen neuen State erhält, normalerweise als Reaktion auf eine Interaktion.
• Eine Komponente wirdungemountet, wenn sie vom Bildschirm entfernt wird.

Das ist eine gute Art, über Komponenten nachzudenken, abernichtüber Effekte.Versuchen Sie stattdessen, jeden Effekt unabhängig vom Lebenszyklus Ihrer Komponente zu betrachten. Ein Effekt beschreibt, wie einexternes Systemmit den aktuellen Props und dem State synchronisiert wird. Wenn sich Ihr Code ändert, muss die Synchronisation häufiger oder seltener erfolgen.

Um diesen Punkt zu veranschaulichen, betrachten Sie diesen Effekt, der Ihre Komponente mit einem Chat-Server verbindet:

Der Hauptteil Ihres Effekts legt fest, wie dieSynchronisation gestartet wird:

Die von Ihrem Effekt zurückgegebene Cleanup-Funktion legt fest, wie dieSynchronisation gestoppt wird:

Intuitiv könnten Sie denken, dass React dieSynchronisation startet, wenn Ihre Komponente gemountet wird, und dieSynchronisation stoppt, wenn Ihre Komponente ungemountet wird. Das ist jedoch nicht das Ende der Geschichte! Manchmal kann es auch notwendig sein, dieSynchronisation mehrmals zu starten und zu stoppen, während die Komponente gemountet bleibt.

Sehen wir uns an,warumdies notwendig ist,wannes passiert undwieSie dieses Verhalten steuern können.

Warum die Synchronisation mehrmals erfolgen muss

Stellen Sie sich vor, dieseChatRoom-Komponente erhält eineroomId-Prop, die der Benutzer in einem Dropdown-Menü auswählt. Nehmen wir an, der Benutzer wählt zunächst den Raum"general" als roomIdaus. Ihre App zeigt den"general"-Chatraum an:

Nachdem die UI angezeigt wurde, führt React Ihren Effekt aus, um dieSynchronisation zu starten.Er verbindet sich mit dem"general"-Raum:

Bisher so gut.

Später wählt der Benutzer einen anderen Raum im Dropdown-Menü (zum Beispiel"travel"). Zuerst wird React die Benutzeroberfläche aktualisieren:

Überlegen Sie, was als Nächstes passieren sollte. Der Benutzer sieht, dass"travel"der ausgewählte Chatraum in der Benutzeroberfläche ist. Der Effekt, der beim letzten Mal ausgeführt wurde, ist jedoch immer noch mit dem"general"-Raum verbunden.DieroomId-Prop hat sich geändert, daher entspricht das, was Ihr Effekt damals getan hat (Verbindung zum"general"-Raum herstellen), nicht mehr der Benutzeroberfläche.

An diesem Punkt möchten Sie, dass React zwei Dinge tut:

1. Die Synchronisation mit der altenroomIdbeenden (Verbindung zum"general"-Raum trennen)
2. Die Synchronisation mit der neuenroomIdbeginnen (Verbindung zum"travel"-Raum herstellen)

Glücklicherweise haben Sie React bereits beigebracht, wie es beides tun kann!Der Hauptteil Ihres Effekts legt fest, wie die Synchronisation beginnt, und Ihre Cleanup-Funktion legt fest, wie die Synchronisation beendet wird. Alles, was React jetzt tun muss, ist, sie in der richtigen Reihenfolge und mit den richtigen Props und dem richtigen State aufzurufen. Sehen wir uns an, wie genau das passiert.

Wie React Ihren Effekt erneut synchronisiert

Erinnern Sie sich, dass IhreChatRoom-Komponente einen neuen Wert für ihreroomId-Prop erhalten hat. Früher war es"general", jetzt ist es"travel". React muss Ihren Effekt erneut synchronisieren, um Sie mit einem anderen Raum zu verbinden.

Um dieSynchronisation zu beenden,wird React die Cleanup-Funktion aufrufen, die Ihr Effekt nach dem Verbinden mit dem"general"-Raum zurückgegeben hat. DaroomId "general"war, trennt die Cleanup-Funktion die Verbindung zum"general"-Raum:

Dann wird React den Effekt ausführen, den Sie während dieses Render-Vorgangs bereitgestellt haben. Diesmal istroomId "travel", also wird es dieSynchronisation mit dem"travel"-Chatraum beginnen (bis auch seine Cleanup-Funktion irgendwann aufgerufen wird):

Dadurch sind Sie jetzt mit demselben Raum verbunden, den der Benutzer in der Benutzeroberfläche ausgewählt hat. Eine Katastrophe wurde abgewendet!

Jedes Mal, nachdem Ihre Komponente mit einer anderenroomIdneu gerendert wird, wird Ihr Effekt erneut synchronisiert. Nehmen wir zum Beispiel an, der Benutzer ändertroomIdvon"travel"zu"music". React wird dieSynchronisation Ihres Effekts erneut beenden, indem es seine Cleanup-Funktion aufruft (Sie vom"travel"-Raum trennt). Dann wird es dieSynchronisation erneut beginnen, indem es seinen Hauptteil mit der neuenroomId-Prop ausführt (Sie mit dem"music"-Raum verbindet).

Schließlich, wenn der Benutzer zu einem anderen Bildschirm wechselt, wirdChatRoomausgehängt. Jetzt besteht überhaupt keine Notwendigkeit mehr, verbunden zu bleiben. React wird dieSynchronisation Ihres Effekts ein letztes Mal beenden und Sie vom "music"-Chatraum trennen.

Aus der Perspektive des Effekts denken

Fassen wir alles zusammen, was aus der Perspektive derChatRoom-Komponente passiert ist:

1. ChatRoomwurde mitroomIdgleich"general" gemountet
2. ChatRoomwurde mitroomIdgleich"travel" aktualisiert
3. ChatRoomwurde mitroomIdgleich"music" aktualisiert
4. ChatRoomwurde unmountet

Während jedes dieser Punkte im Lebenszyklus der Komponente hat dein Effekt unterschiedliche Dinge getan:

1. Dein Effekt hat sich mit dem Raum"general"verbunden
2. Dein Effekt hat sich vom Raum"general"getrennt und mit dem Raum"travel"verbunden
3. Dein Effekt hat sich vom Raum"travel"getrennt und mit dem Raum"music"verbunden
4. Dein Effekt hat sich vom Raum"music"getrennt

Betrachten wir nun, was aus der Perspektive des Effekts selbst passiert ist:

Die Struktur dieses Codes könnte dich dazu inspirieren, das Geschehene als eine Abfolge nicht überlappender Zeiträume zu sehen:

1. Ihr Effekt hat sich mit dem Raum"general"verbunden (bis er die Verbindung trennte)
2. Ihr Effekt hat sich mit dem Raum"travel"verbunden (bis er die Verbindung trennte)
3. Ihr Effekt hat sich mit dem Raum"music"verbunden (bis er die Verbindung trennte)

Zuvor haben Sie aus der Perspektive der Komponente gedacht. Wenn Sie aus der Perspektive der Komponente schauen, ist es verlockend, Effekte als "Callbacks" oder "Lifecycle-Events" zu betrachten, die zu einem bestimmten Zeitpunkt ausgelöst werden, wie "nach einem Render" oder "vor dem Unmount". Diese Denkweise wird sehr schnell kompliziert, daher ist es am besten, sie zu vermeiden.

Konzentrieren Sie sich stattdessen immer auf einen einzelnen Start/Stopp-Zyklus zur Zeit. Es sollte keine Rolle spielen, ob eine Komponente gemountet, aktualisiert oder ungemountet wird. Alles, was Sie tun müssen, ist zu beschreiben, wie die Synchronisierung gestartet und wie sie gestoppt wird. Wenn Sie das gut machen, wird Ihr Effekt robust genug sein, um so oft wie nötig gestartet und gestoppt zu werden.

Das könnte Sie daran erinnern, wie Sie nicht darüber nachdenken, ob eine Komponente gemountet oder aktualisiert wird, wenn Sie die Rendering-Logik schreiben, die JSX erzeugt. Sie beschreiben, was auf dem Bildschirm sein sollte, und Reacterledigt den Rest.

Wie React überprüft, dass Ihr Effekt erneut synchronisiert werden kann

Hier ist ein Live-Beispiel, mit dem Sie experimentieren können. Drücken Sie "Chat öffnen", um dieChatRoom-Komponente zu mounten:

Beachten Sie, dass beim ersten Mounten der Komponente drei Logs zu sehen sind:

1. ✅ Connecting to "general" room at https://localhost:1234...(nur in der Entwicklung)
2. ❌ Disconnected from "general" room at https://localhost:1234.(nur in der Entwicklung)
3. ✅ Connecting to "general" room at https://localhost:1234...

Die ersten beiden Logs sind nur für die Entwicklung. In der Entwicklung wird jede Komponente von React einmal neu eingehängt.

React überprüft, ob dein Effekt sich erneut synchronisieren kann, indem es ihn in der Entwicklung sofort dazu zwingt.Das erinnert vielleicht daran, eine Tür zu öffnen und ein extra Mal zu schließen, um zu prüfen, ob das Türschloss funktioniert. React startet und stoppt deinen Effekt in der Entwicklung ein extra Mal, um zu prüfen,ob du seine Cleanup-Funktion gut implementiert hast.

Der Hauptgrund, warum dein Effekt in der Praxis erneut synchronisiert wird, ist, wenn sich einige Daten, die er verwendet, geändert haben. Ändere im obigen Sandkasten den ausgewählten Chatraum. Beachte, wie sich dein Effekt erneut synchronisiert, wenn sich dieroomId ändert.

Es gibt jedoch auch ungewöhnlichere Fälle, in denen eine erneute Synchronisierung notwendig ist. Versuche zum Beispiel, dieserverUrlim obigen Sandkasten zu bearbeiten, während der Chat geöffnet ist. Beachte, wie der Effekt als Reaktion auf deine Code-Bearbeitungen erneut synchronisiert. In Zukunft könnte React weitere Funktionen hinzufügen, die auf erneuter Synchronisierung basieren.

Wie React weiß, dass es den Effekt erneut synchronisieren muss

Du fragst dich vielleicht, wie React wusste, dass dein Effekt sich nach einer Änderung vonroomIderneut synchronisieren muss. Das liegt daran, dassdu React mitgeteilt hast, dass sein Code vonroomIdabhängt, indem du ihn in dieListe der Abhängigkeiten aufgenommen hast:

So funktioniert das:

1. Du wusstest, dassroomIdeine Prop ist, was bedeutet, dass sie sich im Laufe der Zeit ändern kann.
2. Du wusstest, dass dein EffektroomIdliest (also seine Logik von einem Wert abhängt, der sich später ändern kann).
3. Deshalb hast du sie als Abhängigkeit deines Effekts angegeben (damit er sich erneut synchronisiert, wenn sichroomIdändert).

Jedes Mal, nachdem deine Komponente neu gerendert wurde, wird React sich das Array der Abhängigkeiten ansehen, das du übergeben hast. Wenn sich einer der Werte im Array von dem Wert an derselben Stelle unterscheidet, den du während des vorherigen Renderings übergeben hast, wird React deinen Effekt erneut synchronisieren.

Wenn du zum Beispiel beim ersten Rendering["general"]übergeben hast und später beim nächsten Rendering["travel"], wird React "general"und"travel"vergleichen. Dies sind unterschiedliche Werte (verglichen mitObject.is), also wird React deinen Effekt erneut synchronisieren. Wenn deine Komponente hingegen neu gerendert wird, sich aberroomIdnicht geändert hat, bleibt dein Effekt mit demselben Raum verbunden.

Jeder Effekt repräsentiert einen separaten Synchronisierungsprozess

Widerstehe der Versuchung, unabhängige Logik zu deinem Effekt hinzuzufügen, nur weil diese Logik zur gleichen Zeit ausgeführt werden muss wie ein Effekt, den du bereits geschrieben hast. Nehmen wir zum Beispiel an, du möchtest ein Analytics-Ereignis senden, wenn der Nutzer den Raum besucht. Du hast bereits einen Effekt, der vonroomIdabhängt, also könntest du versucht sein, den Analytics-Aufruf dort hinzuzufügen:

Aber stell dir vor, du fügst diesem Effekt später eine weitere Abhängigkeit hinzu, die die Verbindung neu aufbauen muss. Wenn sich dieser Effekt erneut synchronisiert, wird er auchlogVisit(roomId)für denselben Raum aufrufen, was du nicht beabsichtigt hast. Das Protokollieren des Besuchsist ein separater Prozessvom Verbinden. Schreibe sie als zwei separate Effekte:

Jeder Effekt in deinem Code sollte einen separaten und unabhängigen Synchronisierungsprozess repräsentieren.

Im obigen Beispiel würde das Löschen eines Effekts die Logik des anderen Effekts nicht brechen. Das ist ein gutes Zeichen dafür, dass sie unterschiedliche Dinge synchronisieren, und es daher sinnvoll war, sie aufzuteilen. Wenn du hingegen einen zusammenhängenden Teil der Logik in separate Effekte aufteilst, mag der Code „sauberer“ aussehen, wird aberschwieriger zu warten sein.Deshalb solltest du darüber nachdenken, ob die Prozesse gleich oder getrennt sind, und nicht, ob der Code sauberer aussieht.

Effekte „reagieren“ auf reaktive Werte

Dein Effekt liest zwei Variablen (serverUrlundroomId), aber du hast nurroomIdals Abhängigkeit angegeben:

Warum mussserverUrlkeine Abhängigkeit sein?

Das liegt daran, dass sichserverUrldurch ein erneutes Rendern nie ändert. Er bleibt immer gleich, egal wie oft die Komponente neu gerendert wird und warum. Da sichserverUrlnie ändert, wäre es unsinnig, ihn als Abhängigkeit anzugeben. Schließlich bewirken Abhängigkeiten nur etwas, wenn sie sich im Laufe der Zeit ändern!

Andererseits kann sichroomIdbei einem erneuten Rendern unterscheiden.Props, State und andere Werte, die innerhalb der Komponente deklariert werden, sindreaktiv, da sie während des Renderings berechnet werden und am React-Datenfluss teilnehmen.

WennserverUrleine State-Variable wäre, wäre sie reaktiv. Reaktive Werte müssen in die Abhängigkeiten aufgenommen werden:

Indem SieserverUrlals Abhängigkeit aufnehmen, stellen Sie sicher, dass der Effekt sich nach einer Änderung erneut synchronisiert.

Versuchen Sie, den ausgewählten Chatraum zu ändern oder die Server-URL in dieser Sandbox zu bearbeiten:

Immer wenn Sie einen reaktiven Wert wieroomIdoderserverUrländern, verbindet sich der Effekt erneut mit dem Chat-Server.

Was ein Effekt mit leeren Abhängigkeiten bedeutet

Was passiert, wenn Sie sowohlserverUrlals auchroomIdaus der Komponente herausbewegen?

Jetzt verwendet der Code Ihres Effektskeinereaktiven Werte mehr, daher können seine Abhängigkeiten leer sein ([]).

Aus der Perspektive der Komponente betrachtet bedeutet das leere[]Abhängigkeitsarray, dass dieser Effekt nur dann eine Verbindung zum Chatraum herstellt, wenn die Komponente eingebunden wird, und nur dann trennt, wenn die Komponente entfernt wird. (Denken Sie daran, dass React ihn in der Entwicklung trotzdemein zusätzliches Mal erneut synchronisierenwürde, um Ihre Logik zu testen.)

Wenn Sie jedochaus der Perspektive des Effekts denken,müssen Sie sich überhaupt nicht mit Einbinden und Entfernen beschäftigen. Wichtig ist, dass Sie angegeben haben, was Ihr Effekt tun soll, um die Synchronisation zu starten und zu stoppen. Heute hat er keine reaktiven Abhängigkeiten. Aber wenn Sie jemals möchten, dass der BenutzerroomIdoderserverUrlim Laufe der Zeit ändert (und sie würden reaktiv werden), ändert sich der Code Ihres Effekts nicht. Sie müssen sie lediglich zu den Abhängigkeiten hinzufügen.

Alle im Komponentenkörper deklarierten Variablen sind reaktiv

Props und State sind nicht die einzigen reaktiven Werte. Werte, die Sie daraus berechnen, sind ebenfalls reaktiv. Wenn sich die Props oder der State ändern, wird Ihre Komponente neu gerendert, und die daraus berechneten Werte ändern sich ebenfalls. Deshalb sollten alle Variablen aus dem Komponentenkörper, die vom Effekt verwendet werden, in der Abhängigkeitsliste des Effekts stehen.

Nehmen wir an, der Benutzer kann in einem Dropdown einen Chat-Server auswählen, aber er kann auch einen Standard-Server in den Einstellungen konfigurieren. Angenommen, Sie haben den Einstellungs-State bereits in einenContextgelegt, sodass Sie diesettingsaus diesem Context lesen. Jetzt berechnen Sie dieserverUrlbasierend auf dem ausgewählten Server aus den Props und dem Standard-Server:

In diesem Beispiel istserverUrlkein Prop oder eine State-Variable. Es ist eine reguläre Variable, die während des Renderings berechnet wird. Da sie aber während des Renderings berechnet wird, kann sie sich durch ein erneutes Rendering ändern. Deshalb ist sie reaktiv.

Alle Werte innerhalb der Komponente (einschließlich Props, State und Variablen im Komponentenkörper) sind reaktiv. Jeder reaktive Wert kann sich bei einem erneuten Rendering ändern, daher müssen Sie reaktive Werte als Abhängigkeiten des Effects angeben.

Mit anderen Worten: Effects „reagieren“ auf alle Werte aus dem Komponentenkörper.

React überprüft, ob Sie jeden reaktiven Wert als Abhängigkeit angegeben haben

Wenn Ihr Linterfür React konfiguriert ist,wird er prüfen, dass jeder reaktive Wert, der vom Code Ihres Effects verwendet wird, als dessen Abhängigkeit deklariert ist. Dies ist beispielsweise ein Linter-Fehler, da sowohlroomIdals auchserverUrlreaktiv sind:

Dies mag wie ein React-Fehler aussehen, aber React weist tatsächlich auf einen Fehler in Ihrem Code hin. SowohlroomIdals auchserverUrlkönnen sich im Laufe der Zeit ändern, aber Sie vergessen, Ihren Effect neu zu synchronisieren, wenn sie sich ändern. Sie bleiben mit dem anfänglichenroomIdundserverUrlverbunden, selbst nachdem der Benutzer in der Benutzeroberfläche andere Werte auswählt.

Um den Fehler zu beheben, befolgen Sie den Vorschlag des Linters und geben SieroomIdundserverUrlals Abhängigkeiten Ihres Effects an:

Probieren Sie diese Korrektur im obigen Sandkasten aus. Vergewissern Sie sich, dass der Linter-Fehler verschwunden ist und der Chat bei Bedarf neu verbindet.

Was tun, wenn Sie nicht neu synchronisieren möchten

Im vorherigen Beispiel haben Sie den Linter-Fehler behoben, indem SieroomIdundserverUrlals Abhängigkeiten aufgeführt haben.

Alternativ könnten Sie dem Linter jedoch „beweisen“, dass diese Werte keine reaktiven Werte sind,d.h. dass sie sichnichtals Ergebnis eines erneuten Renderings ändern können. Wenn beispielsweiseserverUrlundroomIdnicht vom Rendering abhängen und immer die gleichen Werte haben, können Sie sie außerhalb der Komponente verschieben. Jetzt müssen sie keine Abhängigkeiten mehr sein:

Sie können sie auchinnerhalb des Effects verschieben.Sie werden nicht während des Renderns berechnet und sind daher nicht reaktiv:

Effects sind reaktive Codeblöcke.Sie synchronisieren sich neu, wenn sich die Werte, die Sie darin lesen, ändern. Im Gegensatz zu Event-Handlern, die nur einmal pro Interaktion ausgeführt werden, laufen Effects immer dann, wenn eine Synchronisation notwendig ist.

Sie können Ihre Abhängigkeiten nicht „auswählen“.Ihre Abhängigkeiten müssen jedenreaktiven Wertenthalten, den Sie im Effect lesen. Der Linter erzwingt dies. Manchmal kann dies zu Problemen wie Endlosschleifen führen oder dazu, dass Ihr Effect sich zu oft neu synchronisiert. Beheben Sie diese Probleme nicht, indem Sie den Linter unterdrücken! Versuchen Sie stattdessen Folgendes:

• Überprüfen Sie, ob Ihr Effect einen unabhängigen Synchronisationsprozess darstellt.Wenn Ihr Effect nichts synchronisiert,ist er möglicherweise unnötig.Wenn er mehrere unabhängige Dinge synchronisiert,teilen Sie ihn auf.
• Wenn Sie den neuesten Wert von Props oder State lesen möchten, ohne darauf zu „reagieren“ und den Effect neu zu synchronisieren,können Sie Ihren Effect in einen reaktiven Teil (den Sie im Effect behalten) und einen nicht-reaktiven Teil (den Sie in etwas namensEffect Eventextrahieren) aufteilen.Lesen Sie über die Trennung von Events und Effects.
• Vermeiden Sie es, sich auf Objekte und Funktionen als Abhängigkeiten zu verlassen.Wenn Sie Objekte und Funktionen während des Renderns erstellen und dann aus einem Effect lesen, sind sie bei jedem Render unterschiedlich. Dies führt dazu, dass Ihr Effect sich jedes Mal neu synchronisiert.Lesen Sie mehr über das Entfernen unnötiger Abhängigkeiten von Effects.

Zusammenfassung

• Komponenten können mounten, aktualisieren und unmounten.
• Jeder Effect hat einen eigenen Lebenszyklus, getrennt von der umgebenden Komponente.
• Jeder Effect beschreibt einen separaten Synchronisationsprozess, derstartenundstoppenkann.
• Wenn Sie Effects schreiben und lesen, denken Sie aus der Perspektive jedes einzelnen Effects (wie die Synchronisation startet und stoppt) und nicht aus der Perspektive der Komponente (wie sie mountet, aktualisiert oder unmountet).
• Im Komponentenkörper deklarierte Werte sind „reaktiv“.
• Reaktive Werte sollten den Effect neu synchronisieren, da sie sich im Laufe der Zeit ändern können.
• Der Linter überprüft, dass alle im Effect verwendeten reaktiven Werte als Abhängigkeiten angegeben sind.
• Alle vom Linter gemeldeten Fehler sind berechtigt. Es gibt immer eine Möglichkeit, den Code zu reparieren, ohne die Regeln zu brechen.