Interaktivität hinzufügen

Einige Dinge auf dem Bildschirm aktualisieren sich als Reaktion auf Benutzereingaben. Zum Beispiel schaltet ein Klick auf eine Bildergalerie das aktive Bild um. In React werden Daten, die sich im Laufe der Zeit ändern, alsState (Zustand)bezeichnet. Sie können jeder Komponente State hinzufügen und ihn bei Bedarf aktualisieren. In diesem Kapitel lernen Sie, wie Sie Komponenten schreiben, die Interaktionen verarbeiten, ihren State aktualisieren und im Laufe der Zeit unterschiedliche Ausgaben anzeigen.

Auf Ereignisse reagieren

React ermöglicht es Ihnen,Event-Handlerzu Ihrem JSX hinzuzufügen. Event-Handler sind Ihre eigenen Funktionen, die als Reaktion auf Benutzerinteraktionen wie Klicken, Hover, Fokussieren von Formulareingaben usw. ausgelöst werden.

Integrierte Komponenten wie<button>unterstützen nur integrierte Browser-Ereignisse wieonClick. Sie können jedoch auch Ihre eigenen Komponenten erstellen und ihren Event-Handler-Props beliebige anwendungsspezifische Namen geben.

State: Der Speicher einer Komponente

Komponenten müssen oft ändern, was auf dem Bildschirm angezeigt wird, als Ergebnis einer Interaktion. Das Tippen in ein Formular sollte das Eingabefeld aktualisieren, das Klicken auf „Weiter“ in einer Bildkarussell sollte das angezeigte Bild ändern, das Klicken auf „Kaufen“ legt ein Produkt in den Warenkorb. Komponenten müssen sich Dinge „merken“: den aktuellen Eingabewert, das aktuelle Bild, den Warenkorb. In React wird diese Art von komponentenspezifischem Speicher alsState (Zustand)

Sie können einer Komponente mit einemuseStateHook State hinzufügen.Hookssind spezielle Funktionen, die es Ihren Komponenten ermöglichen, React-Funktionen zu nutzen (State ist eine dieser Funktionen). DeruseStateHook ermöglicht es Ihnen, eine State-Variable zu deklarieren. Er nimmt den initialen State entgegen und gibt ein Wertepaar zurück: den aktuellen State und eine State-Setter-Funktion, mit der Sie ihn aktualisieren können.

Hier sehen Sie, wie eine Bildergalerie State verwendet und bei einem Klick aktualisiert:

Rendern und Commit

Bevor deine Komponenten auf dem Bildschirm angezeigt werden, müssen sie von React gerendert werden. Wenn du die Schritte dieses Prozesses verstehst, kannst du besser nachvollziehen, wie dein Code ausgeführt wird, und sein Verhalten erklären.

Stell dir vor, deine Komponenten sind Köche in einer Küche, die aus Zutaten leckere Gerichte zusammenstellen. In diesem Szenario ist React der Kellner, der Bestellungen der Gäste entgegennimmt und die Gerichte serviert. Dieser Prozess der Anforderung und Auslieferung der Benutzeroberfläche besteht aus drei Schritten:

1. Auslöseneines Renders (Übergeben der Gästebestellung an die Küche)
2. Rendernder Komponente (Zubereiten der Bestellung in der Küche)
3. Commitan das DOM (Platzieren der Bestellung auf dem Tisch)

1. Auslösen
2. Rendern
3. Commit

Illustriert vonRachel Lee Nabors

State als Momentaufnahme

Im Gegensatz zu regulären JavaScript-Variablen verhält sich der React-State eher wie eine Momentaufnahme. Das Setzen ändert nicht die bereits vorhandene State-Variable, sondern löst ein erneutes Rendern aus. Das kann zunächst überraschend sein!

Dieses Verhalten hilft dir, subtile Fehler zu vermeiden. Hier ist eine kleine Chat-App. Versuche zu erraten, was passiert, wenn du zuerst auf „Senden“ drückst unddannden Empfänger auf Bob änderst. Wessen Name wird fünf Sekunden später imalerterscheinen?

Eine Reihe von State-Updates in die Warteschlange stellen

Diese Komponente hat einen Fehler: Ein Klick auf „+3“ erhöht den Punktestand nur einmal.

State as a Snapshoterklärt, warum das passiert. Das Setzen des States fordert ein neues Rendering an, ändert ihn aber nicht im bereits laufenden Code. Daher bleibtscoredirekt nach dem Aufruf von0weiterhinsetScore(score + 1).

Du kannst dies beheben, indem du beim Setzen des States eineUpdater-Funktionübergibst. Beachte, wie das Ersetzen vonsetScore(score + 1)durchsetScore(s => s + 1)den „+3“-Button repariert. Dies ermöglicht es dir, mehrere State-Updates in die Warteschlange zu stellen.

Objekte im State aktualisieren

State kann jede Art von JavaScript-Wert enthalten, einschließlich Objekten. Aber du solltest Objekte und Arrays, die du im React-State hältst, nicht direkt ändern. Stattdessen musst du, wenn du ein Objekt oder Array aktualisieren möchtest, ein neues erstellen (oder eine Kopie eines bestehenden anfertigen) und dann den State so aktualisieren, dass er diese Kopie verwendet.

Normalerweise verwendest du die...Spread-Syntax, um Objekte und Arrays zu kopieren, die du ändern möchtest. Zum Beispiel könnte die Aktualisierung eines verschachtelten Objekts so aussehen:

Wenn das Kopieren von Objekten im Code mühsam wird, kannst du eine Bibliothek wieImmerverwenden, um repetitiven Code zu reduzieren:

Arrays im State aktualisieren

Arrays sind ein weiterer Typ veränderlicher JavaScript-Objekte, die du im State speichern kannst und die du als schreibgeschützt behandeln solltest. Genau wie bei Objekten musst du, wenn du ein im State gespeichertes Array aktualisieren möchtest, ein neues erstellen (oder eine Kopie eines bestehenden anfertigen) und dann den State so setzen, dass er das neue Array verwendet:

Wenn das Kopieren von Arrays im Code mühsam wird, kannst du eine Bibliothek wieImmerverwenden, um repetitiven Code zu reduzieren:

Was kommt als Nächstes?

Gehe weiter zuAuf Ereignisse reagieren, um dieses Kapitel Seite für Seite zu lesen!

Oder, wenn du mit diesen Themen bereits vertraut bist, warum liest du nicht überState-Management?