State-Management

Wenn Ihre Anwendung wächst, ist es hilfreich, gezielter darüber nachzudenken, wie Ihr State organisiert ist und wie Daten zwischen Ihren Komponenten fließen. Redundanter oder doppelter State ist eine häufige Fehlerquelle. In diesem Kapitel lernen Sie, wie Sie Ihren State gut strukturieren, wie Sie Ihre State-Aktualisierungslogik wartbar halten und wie Sie State zwischen entfernten Komponenten teilen.

Auf Eingaben mit State reagieren

Mit React modifizieren Sie die UI nicht direkt aus dem Code heraus. Sie schreiben beispielsweise keine Befehle wie „Button deaktivieren“, „Button aktivieren“, „Erfolgsmeldung anzeigen“ usw. Stattdessen beschreiben Sie die UI, die Sie für die verschiedenen visuellen Zustände Ihrer Komponente sehen möchten („Anfangszustand“, „Eingabezustand“, „Erfolgszustand“), und lösen dann die State-Änderungen als Reaktion auf Benutzereingaben aus. Dies ähnelt der Denkweise von Designern über UI.

Hier ist ein Quiz-Formular, das mit React erstellt wurde. Beachten Sie, wie es die State-Variablestatusverwendet, um zu bestimmen, ob der Absende-Button aktiviert oder deaktiviert werden soll und ob stattdessen die Erfolgsmeldung angezeigt werden soll.

Die State-Struktur auswählen

Eine gut strukturierte State kann den Unterschied ausmachen zwischen einer Komponente, die angenehm zu ändern und zu debuggen ist, und einer, die eine ständige Fehlerquelle darstellt. Das wichtigste Prinzip ist, dass der State keine redundanten oder duplizierten Informationen enthalten sollte. Wenn unnötiger State vorhanden ist, vergisst man leicht, ihn zu aktualisieren, und führt Fehler ein!

Zum Beispiel hat dieses Formular eineredundantefullNameState-Variable:

Du kannst sie entfernen und den Code vereinfachen, indem dufullNamewährend des Renderns der Komponente berechnest:

Dies mag wie eine kleine Änderung erscheinen, aber viele Fehler in React-Apps werden auf diese Weise behoben.

State zwischen Komponenten teilen

Manchmal möchtest du, dass sich der State zweier Komponenten immer gemeinsam ändert. Um das zu erreichen, entfernst du den State aus beiden, verschiebst ihn zu ihrem nächsten gemeinsamen Eltern-Element und übergibst ihn dann über Props an sie. Dies wird als „State nach oben heben“ bezeichnet und ist eine der häufigsten Aufgaben beim Schreiben von React-Code.

In diesem Beispiel sollte jeweils nur ein Panel aktiv sein. Um dies zu erreichen, hält die Elternkomponente den State und legt die Props für ihre Kinder fest, anstatt den aktiven State in jedem einzelnen Panel zu behalten.

State erhalten und zurücksetzen

Wenn du eine Komponente neu rendern lässt, muss React entscheiden, welche Teile des Baums beibehalten (und aktualisiert) werden sollen und welche Teile verworfen oder von Grund auf neu erstellt werden sollen. In den meisten Fällen funktioniert das automatische Verhalten von React gut genug. Standardmäßig erhält React die Teile des Baums, die mit dem zuvor gerenderten Komponentenbaum „übereinstimmen“.

Manchmal ist dies jedoch nicht das, was du möchtest. In dieser Chat-App wird die Eingabe nicht zurückgesetzt, wenn du eine Nachricht eingibst und dann den Empfänger wechselst. Dies kann dazu führen, dass der Nutzer versehentlich eine Nachricht an die falsche Person sendet:

React ermöglicht es Ihnen, das Standardverhalten zu überschreiben underzwingenSie, dass eine Komponente ihren Zustand zurücksetzt, indem Sie ihr einen anderenkey übergeben, wie z.B. <Chat key={email} />. Dies teilt React mit, dass, wenn der Empfänger ein anderer ist, dies als eineandereChat-Komponente betrachtet werden sollte, die von Grund auf neu mit den neuen Daten (und UI-Elementen wie Eingabefeldern) erstellt werden muss. Das Wechseln zwischen den Empfängern setzt nun das Eingabefeld zurück – obwohl Sie dieselbe Komponente rendern.

Zustandslogik in einen Reducer auslagern

Komponenten mit vielen Zustandsaktualisierungen, die über viele Event-Handler verteilt sind, können überwältigend werden. Für diese Fälle kannst du die gesamte Zustandsaktualisierungslogik außerhalb deiner Komponente in einer einzigen Funktion konsolidieren, die "Reducer" genannt wird. Deine Event-Handler werden prägnant, da sie nur die Benutzer-"Aktionen" angeben. Am Ende der Datei legt die Reducer-Funktion fest, wie der Zustand als Reaktion auf jede Aktion aktualisiert werden soll!

Daten tief mit Context übergeben

Normalerweise übergibst du Informationen von einer Elternkomponente an eine Kindkomponente über Props. Das Übergeben von Props kann jedoch umständlich werden, wenn du eine Prop durch viele Komponenten hindurchreichen musst oder wenn viele Komponenten dieselben Informationen benötigen. Context ermöglicht es der Elternkomponente, Informationen für jede Komponente im darunterliegenden Baum verfügbar zu machen – egal wie tief sie verschachtelt ist – ohne sie explizit über Props zu übergeben.

Hier bestimmt dieHeading-Komponente ihre Überschriftenebene, indem sie die nächstgelegeneSectionnach ihrer Ebene „fragt“. JedeSectionermittelt ihre eigene Ebene, indem sie die übergeordneteSectionfragt und eins dazu addiert. JedeSectionstellt Informationen für alle Komponenten unter ihr bereit, ohne Props zu übergeben – sie tut dies über Context.

Skalieren mit Reducer und Context

Reducer ermöglichen es dir, die Aktualisierungslogik des Zustands einer Komponente zu konsolidieren. Context ermöglicht es dir, Informationen tief an andere Komponenten weiterzugeben. Du kannst Reducer und Context kombinieren, um den Zustand eines komplexen Bildschirms zu verwalten.

Mit diesem Ansatz verwaltet eine Elternkomponente mit komplexem Zustand diesen mit einem Reducer. Andere Komponenten, die sich irgendwo tief im Baum befinden, können ihren Zustand über Context lesen. Sie können auch Aktionen auslösen, um diesen Zustand zu aktualisieren.

Was kommt als Nächstes?

Gehe weiter zuReagieren auf Eingaben mit State, um dieses Kapitel Seite für Seite zu lesen!

Oder, wenn du mit diesen Themen bereits vertraut bist, warum nicht überNotausgängelesen?