Notlösungen

Einige Ihrer Komponenten müssen möglicherweise mit Systemen außerhalb von React interagieren und synchronisiert werden. Beispielsweise müssen Sie möglicherweise einen Input mit der Browser-API fokussieren, einen Videoplayer, der nicht mit React implementiert ist, abspielen oder pausieren oder eine Verbindung zu einem entfernten Server herstellen und auf Nachrichten von diesem hören. In diesem Kapitel lernen Sie die Notlösungen kennen, mit denen Sie "aus React herausgehen" und sich mit externen Systemen verbinden können. Der Großteil Ihrer Anwendungslogik und Ihres Datenflusses sollte nicht auf diese Funktionen angewiesen sein.

Werte mit Refs referenzieren

Wenn eine Komponente sich eine Information "merken" soll, diese Information aber keineneuen Render-Vorgänge auslösensoll, können Sie einenRefverwenden:

Wie State werden Refs von React zwischen Render-Vorgängen beibehalten. Allerdings löst das Setzen von State einen erneuten Render-Vorgang einer Komponente aus. Das Ändern eines Refs tut dies nicht! Sie können auf den aktuellen Wert dieses Refs über die Eigenschaftref.currentzugreifen.

Ein Ref ist wie eine geheime Tasche Ihrer Komponente, die React nicht verfolgt. Beispielsweise können Sie Refs verwenden, umTimeout-IDs,DOM-Elementeund andere Objekte zu speichern, die die Render-Ausgabe der Komponente nicht beeinflussen.

Das DOM mit Refs manipulieren

React aktualisiert das DOM automatisch, um es mit Ihrer Render-Ausgabe abzugleichen, daher müssen Ihre Komponenten es oft nicht selbst manipulieren. Manchmal müssen Sie jedoch möglicherweise auf die von React verwalteten DOM-Elemente zugreifen – beispielsweise, um einen Knoten zu fokussieren, zu ihm zu scrollen oder seine Größe und Position zu messen. In React gibt es keine eingebaute Möglichkeit, diese Dinge zu tun, daher benötigen Sie einen Ref auf den DOM-Knoten. Beispielsweise wird durch Klicken auf die Schaltfläche der Input mithilfe eines Refs fokussiert:

Mit Effects synchronisieren

Einige Komponenten müssen mit externen Systemen synchronisiert werden. Beispielsweise möchten Sie möglicherweise eine Nicht-React-Komponente basierend auf dem React-State steuern, eine Serververbindung einrichten oder ein Analyseprotokoll senden, wenn eine Komponente auf dem Bildschirm erscheint. Im Gegensatz zu Event-Handlern, mit denen Sie bestimmte Ereignisse behandeln können, lassenEffectsSie nach dem Rendern Code ausführen. Verwenden Sie sie, um Ihre Komponente mit einem System außerhalb von React zu synchronisieren.

Drücken Sie einige Male auf Play/Pause und sehen Sie, wie der Videoplayer mit demisPlaying-Prop-Wert synchronisiert bleibt:

Viele Effects „räumen“ auch nach sich selbst auf. Ein Effect, der eine Verbindung zu einem Chat-Server einrichtet, sollte beispielsweise eineCleanup-Funktionzurückgeben, die React mitteilt, wie die Komponente von diesem Server getrennt werden soll:

In der Entwicklung wird React deinen Effect sofort einmal zusätzlich ausführen und aufräumen. Deshalb siehst du"✅ Connecting..."zweimal ausgegeben. Dies stellt sicher, dass du nicht vergisst, die Cleanup-Funktion zu implementieren.

Du brauchst vielleicht keinen Effect

Effects sind eine Notlösung, um aus dem React-Paradigma auszubrechen. Sie ermöglichen es dir, „aus React herauszutreten“ und deine Komponenten mit einem externen System zu synchronisieren. Wenn kein externes System beteiligt ist (z. B. wenn du den State einer Komponente aktualisieren möchtest, wenn sich einige Props oder der State ändern), solltest du keinen Effect benötigen. Das Entfernen unnötiger Effects macht deinen Code leichter verständlich, schneller ausführbar und weniger fehleranfällig.

Es gibt zwei häufige Fälle, in denen du keine Effects benötigst:

• Du brauchst keine Effects, um Daten für das Rendering zu transformieren.
• Du brauchst keine Effects, um Benutzerereignisse zu behandeln.

Du benötigst beispielsweise keinen Effect, um einen State basierend auf einem anderen State anzupassen:

Berechne stattdessen so viel wie möglich während des Renderings:

Allerdingsbenötigstdu Effects, um dich mit externen Systemen zu synchronisieren.

Lebenszyklus reaktiver Effects

Effects haben einen anderen Lebenszyklus als Komponenten. Komponenten können gemountet, aktualisiert oder ungemountet werden. Ein Effect kann nur zwei Dinge tun: mit der Synchronisierung von etwas beginnen und später damit aufhören. Dieser Zyklus kann mehrmals auftreten, wenn dein Effect von Props und State abhängt, die sich im Laufe der Zeit ändern.

Dieser Effect hängt vom Wert der ProproomIdab. Props sindreaktive Werte,was bedeutet, dass sie sich bei einem erneuten Rendering ändern können. Beachte, dass der Effectneu synchronisiert(und erneut mit dem Server verbindet), wenn sichroomIdändert:

React stellt eine Linter-Regel bereit, um zu überprüfen, ob du die Abhängigkeiten deines Effects korrekt angegeben hast. Wenn du vergisst,roomIdin der Liste der Abhängigkeiten im obigen Beispiel anzugeben, wird der Linter diesen Fehler automatisch finden.

Ereignisse von Effekten trennen

Ereignishandler werden nur erneut ausgeführt, wenn du dieselbe Interaktion wiederholst. Im Gegensatz zu Ereignishandlern synchronisieren sich Effekte erneut, wenn sich einer der von ihnen gelesenen Werte, wie Props oder State, gegenüber dem letzten Rendering geändert hat. Manchmal möchtest du eine Mischung aus beiden Verhaltensweisen: einen Effekt, der als Reaktion auf einige Werte erneut läuft, aber nicht auf andere.

Der gesamte Code innerhalb von Effekten istreaktiv.Er wird erneut ausgeführt, wenn sich ein reaktiver Wert, den er liest, aufgrund eines erneuten Renderings geändert hat. Dieser Effekt würde sich beispielsweise erneut mit dem Chat verbinden, wenn sich entwederroomIdoderthemegeändert haben:

Das ist nicht ideal. Du möchtest dich nur dann erneut mit dem Chat verbinden, wenn sich dieroomIdgeändert hat. Das Umschalten desthemesollte nicht zu einer erneuten Verbindung mit dem Chat führen! Verschiebe den Code, derthemeliest, aus deinem Effekt in einEffekt-Ereignis:

Code innerhalb von Effekt-Ereignissen ist nicht reaktiv, daher führt eine Änderung desthemenicht mehr dazu, dass sich dein Effekt erneut verbindet.

Effekt-Abhängigkeiten entfernen

Wenn du einen Effekt schreibst, überprüft der Linter, dass du jeden reaktiven Wert (wie Props und State), den der Effekt liest, in die Liste der Abhängigkeiten deines Effekts aufgenommen hast. Dies stellt sicher, dass dein Effekt mit den neuesten Props und dem State deiner Komponente synchronisiert bleibt. Unnötige Abhängigkeiten können dazu führen, dass dein Effekt zu oft läuft oder sogar eine Endlosschleife erzeugt. Die Art und Weise, wie du sie entfernst, hängt vom Fall ab.

Dieser Effekt hängt beispielsweise vomoptions-Objekt ab, das jedes Mal neu erstellt wird, wenn du die Eingabe bearbeitest:

Sie möchten nicht, dass sich der Chat jedes Mal neu verbindet, wenn Sie eine Nachricht darin tippen. Um dieses Problem zu beheben, verschieben Sie die Erstellung desoptions-Objekts in den Effekt, sodass der Effekt nur von derroomId-Zeichenkette abhängt:

Beachten Sie, dass Sie nicht damit begonnen haben, die Abhängigkeitsliste zu bearbeiten, um dieoptions-Abhängigkeit zu entfernen. Das wäre falsch gewesen. Stattdessen haben Sie den umgebenden Code so geändert, dass die Abhängigkeitunnötig wurde.Betrachten Sie die Abhängigkeitsliste als eine Liste aller reaktiven Werte, die vom Code Ihres Effekts verwendet werden. Sie wählen nicht bewusst aus, was auf diese Liste kommt. Die Liste beschreibt Ihren Code. Um die Abhängigkeitsliste zu ändern, ändern Sie den Code.

Logik mit eigenen Hooks wiederverwenden

React bringt eingebaute Hooks wieuseState,useContextunduseEffectmit. Manchmal wünscht man sich jedoch einen Hook für einen spezifischeren Zweck: zum Beispiel zum Abrufen von Daten, um zu verfolgen, ob der Benutzer online ist, oder um sich mit einem Chatraum zu verbinden. Dazu kannst du für die Bedürfnisse deiner Anwendung eigene Hooks erstellen.

In diesem Beispiel verfolgt der benutzerdefinierte HookusePointerPositiondie Cursorposition, während der benutzerdefinierte HookuseDelayedValueeinen Wert zurückgibt, der dem übergebenen Wert um eine bestimmte Anzahl von Millisekunden "hinterherhinkt". Bewege den Cursor über den Sandbox-Vorschaubereich, um eine sich bewegende Punktespur zu sehen, die dem Cursor folgt:

Du kannst eigene Hooks erstellen, sie kombinieren, Daten zwischen ihnen übergeben und sie zwischen Komponenten wiederverwenden. Wenn deine App wächst, wirst du weniger Effekte von Hand schreiben, weil du bereits geschriebene benutzerdefinierte Hooks wiederverwenden kannst. Es gibt auch viele ausgezeichnete benutzerdefinierte Hooks, die von der React-Community gepflegt werden.

Was kommt als Nächstes?

Gehe weiter zuWerte mit Refs referenzieren, um dieses Kapitel Seite für Seite zu lesen!