State: Der Speicher einer Komponente

Komponenten müssen oft ändern, was auf dem Bildschirm angezeigt wird, als Reaktion auf eine Interaktion. Das Eintippen in ein Formular sollte das Eingabefeld aktualisieren, das Klicken auf "Weiter" in einer Bildergalerie sollte das angezeigte Bild ändern, das Klicken auf "Kaufen" sollte ein Produkt in den Warenkorb legen. Komponenten müssen sich Dinge "merken": den aktuellen Eingabewert, das aktuelle Bild, den Warenkorb. In React wird diese Art von komponentenspezifischem SpeicherStategenannt.

Wenn eine normale Variable nicht ausreicht

Hier ist eine Komponente, die ein Skulpturbild rendert. Ein Klick auf die Schaltfläche "Weiter" sollte die nächste Skulptur anzeigen, indem derindexauf1, dann2usw. geändert wird. Das wird jedochnicht funktionieren(Sie können es versuchen!):

Der Event-HandlerhandleClickaktualisiert eine lokale Variable,index. Aber zwei Dinge verhindern, dass diese Änderung sichtbar wird:

1. Lokale Variablen bleiben nicht zwischen Renders erhalten.Wenn React diese Komponente ein zweites Mal rendert, tut es das von Grund auf neu – es berücksichtigt keine Änderungen an lokalen Variablen.
2. Änderungen an lokalen Variablen lösen keine Renders aus.React erkennt nicht, dass es die Komponente mit den neuen Daten erneut rendern muss.

Um eine Komponente mit neuen Daten zu aktualisieren, müssen zwei Dinge passieren:

1. BehaltenSie die Daten zwischen den Render-Vorgängen.
2. VeranlassenSie React, die Komponente mit neuen Daten zu rendern (Neu-Rendering).

DeruseState-Hook bietet diese beiden Dinge:

1. EineState-Variable, um die Daten zwischen den Render-Vorgängen zu behalten.
2. EineState-Setter-Funktion, um die Variable zu aktualisieren und React zu veranlassen, die Komponente erneut zu rendern.

Hinzufügen einer State-Variable

Um eine State-Variable hinzuzufügen, importieren SieuseStatevon React am Anfang der Datei:

Ersetzen Sie dann diese Zeile:

durch

indexist eine State-Variable undsetIndexist die Setter-Funktion.

Die[und]Syntax hier heißtArray-Destrukturierungund ermöglicht es Ihnen, Werte aus einem Array zu lesen. Das vonuseStatezurückgegebene Array hat immer genau zwei Elemente.

So arbeiten sie inhandleClickzusammen:

Durch Klicken auf die Schaltfläche „Weiter“ wird nun die aktuelle Skulptur gewechselt:

Lernen Sie Ihren ersten Hook kennen

In React wirduseState, sowie jede andere Funktion, die mit „use“ beginnt, als Hook bezeichnet.

Hookssind spezielle Funktionen, die nur verfügbar sind, während Reactgerendert wird(was wir auf der nächsten Seite genauer besprechen werden). Sie ermöglichen es Ihnen, in verschiedene React-Funktionen „einzuhaken“.

State ist nur eine dieser Funktionen, aber Sie werden die anderen Hooks später kennenlernen.

Aufbau vonuseState

Wenn SieuseStateaufrufen, teilen Sie React mit, dass diese Komponente sich etwas merken soll:

In diesem Fall soll React sichindexmerken.

Das einzige Argument füruseStateist derAnfangswertIhrer State-Variable. In diesem Beispiel wird der Anfangswert vonindex mit 0durchuseState(0)festgelegt.

Jedes Mal, wenn Ihre Komponente gerendert wird, gibt IhnenuseStateein Array mit zwei Werten zurück:

1. DieState-Variable(index) mit dem von Ihnen gespeicherten Wert.
2. DieState-Setter-Funktion(setIndex), die die State-Variable aktualisieren und React dazu veranlassen kann, die Komponente erneut zu rendern.

So geschieht das in der Praxis:

1. Ihre Komponente wird zum ersten Mal gerendert.Da Sie0als Anfangswert füruseState an indexübergeben haben, gibt es[0, setIndex]zurück. React merkt sich, dass0der aktuelle State-Wert ist.
2. Sie aktualisieren den State.Wenn ein Benutzer auf die Schaltfläche klickt, wirdsetIndex(index + 1)aufgerufen.indexist0, also ist essetIndex(1). Dies teilt React mit, sich zu merken, dassindexjetzt1ist, und löst ein erneutes Rendern aus.
3. Das zweite Rendern Ihrer Komponente.React sieht immer nochuseState(0), aber da React sichmerkt, dass Sieindexauf1gesetzt haben, gibt es stattdessen[1, setIndex]zurück.
4. Und so weiter!

Mehrere State-Variablen für eine Komponente

Sie können in einer Komponente so viele State-Variablen beliebigen Typs haben, wie Sie möchten. Diese Komponente hat zwei State-Variablen: eine Zahlindexund einen BooleanshowMore, der beim Klicken auf „Details anzeigen“ umgeschaltet wird:

Es ist eine gute Idee, mehrere State-Variablen zu haben, wenn ihr Zustand unabhängig voneinander ist, wieindexundshowMorein diesem Beispiel. Aber wenn du feststellst, dass du oft zwei State-Variablen zusammen änderst, könnte es einfacher sein, sie zu einer zu kombinieren. Zum Beispiel, wenn du ein Formular mit vielen Feldern hast, ist es bequemer, eine einzelne State-Variable zu haben, die ein Objekt hält, als für jedes Feld eine eigene State-Variable. LiesAuswahl der State-Strukturfür weitere Tipps.

State ist isoliert und privat

State ist lokal für eine Komponenteninstanz auf dem Bildschirm. Mit anderen Worten:Wenn Sie dieselbe Komponente zweimal rendern, hat jede Kopie einen vollständig isolierten State!Die Änderung des einen hat keinen Einfluss auf den anderen.

In diesem Beispiel wird dieGallery-Komponente von vorhin zweimal gerendert, ohne Änderungen an ihrer Logik. Versuchen Sie, die Schaltflächen in jeder der Galerien zu klicken. Beachten Sie, dass ihr State unabhängig ist:

Das unterscheidet den State von regulären Variablen, die Sie möglicherweise oben in Ihrem Modul deklarieren. Der State ist nicht an einen bestimmten Funktionsaufruf oder eine Stelle im Code gebunden, sondern ist "lokal" für die spezifische Stelle auf dem Bildschirm. Sie haben zwei<Gallery />-Komponenten gerendert, daher wird ihr State separat gespeichert.

Beachten Sie auch, dass diePage-Komponente nichts über denGallery-State "weiß" oder sogar, ob sie überhaupt einen hat. Im Gegensatz zu Props istder State vollständig privat für die Komponente, die ihn deklariert.Die übergeordnete Komponente kann ihn nicht ändern. Dadurch können Sie State zu jeder Komponente hinzufügen oder ihn entfernen, ohne den Rest der Komponenten zu beeinflussen.

Was wäre, wenn Sie möchten, dass beide Galerien ihren State synchron halten? Der richtige Weg, dies in React zu tun, ist, den Stateaus den untergeordneten Komponenten zu entfernenund ihn zum nächstgelegenen gemeinsamen Elternteil hinzuzufügen. Die nächsten Seiten konzentrieren sich auf die Organisation des States einer einzelnen Komponente, aber wir werden zu diesem Thema in zurückkehren.State zwischen Komponenten teilen

Zusammenfassung

• Verwenden Sie eine State-Variable, wenn eine Komponente sich Informationen zwischen den Render-Vorgängen "merken" muss.
• State-Variablen werden durch Aufruf desuseStateHooks deklariert.
• Hooks sind spezielle Funktionen, die mitusebeginnen. Sie ermöglichen es Ihnen, in React-Funktionen wie State "einzuhaken".
• Hooks erinnern Sie vielleicht an Imports: Sie müssen bedingungslos aufgerufen werden. Das Aufrufen von Hooks, einschließlichuseState, ist nur auf der obersten Ebene einer Komponente oder eines anderen Hooks gültig.
• DeruseStateHook gibt ein Wertepaar zurück: den aktuellen State und die Funktion, um ihn zu aktualisieren.
• Sie können mehr als eine State-Variable haben. Intern ordnet React sie anhand ihrer Reihenfolge zu.
• State ist privat für die Komponente. Wenn Sie sie an zwei Stellen rendern, erhält jede Kopie ihren eigenen State.