Jetzt können wir also wieder kommunizieren.
Und wir aktualisieren tatsächlich unser Kursziel-Array in der App-Komponente.
Sie sehen jedoch, dass sich die Ausgabe hier auf dem Bildschirm nicht geändert hat, obwohl das Array aktualisiert wurde und das
neue Ziel eindeutig Teil des Arrays ist.
Und das führt uns zu einem Kernkonzept des Reaktionszustands.
React rendert die Entladung nicht erneut, ist X-Code und daher die reale Benutzeroberfläche immer dann, wenn ein Ereignis irgendwo in der
App ausgelöst wird.
Nur weil ich hier auf diese Schaltfläche klicke, bedeutet dies nicht, dass durch Reagieren der gesamte Bildschirm neu gerendert
wird, nur um sicherzustellen, dass keine Datenänderung übersehen wird.
So funktioniert Reagieren nicht.
Stattdessen muss man am Ende sagen.
Reagiere wann es sollte.
Erneut rendern.
Und dann tun Sie dies, indem Sie ein Konzept verwenden, das als Staatsdiskurs bezeichnet wird.
Ziele sind.
Hier ist ein reguläres JavaScript-Array.
Mit anderen Worten, reagieren Sie völlig ignoriert es.
Wir müssen sagen, dass es nicht ignorieren sollte und stattdessen tot ist.
Wann immer wir das Array ändern, sollte es die Benutzeroberfläche aktualisieren.
Der J ist X-Code von der Komponente, in der wir ihn geändert haben.
Also in diesem Fall der App-Komponente.
Dazu importieren wir eine weitere Sache aus dem REAC-Paket.
Und das ist der in die Reaktionsbibliothek integrierte Funktionszustand, ein sogenannter Reaktionshaken.
Und Sie erfahren mehr über Haken in meiner Reaktion auf die vollständige Anleitung.
Kurs.
Na sicher.
Eine Funktion, die wir nicht ausführen können, endet an allen Funktionskomponenten.
Und nur anstelle von Funktionskomponenten in klassenbasierten Komponenten.
Sie haben auch einen Statusverwaltungsmechanismus, der hier nicht im Mittelpunkt dieses Kurses steht, aber Sie können ihn auch dort
durchführen.
In Funktionskomponenten verwenden Sie diese Hook-Funktionen, wie sie genannt werden.
All diese Funktionen.
Beginnen Sie mit der Verwendung am Anfang, um den Status zu verwalten.
Um also Daten zu verwalten, die bei Änderungen zur Benutzeroberfläche der Komponente führen sollten, in der Sie angeben, dass sie
erneut gerendert werden sollen.
Also hier die App-Komponente.
Ich möchte nicht use state und use state aufrufen.
Ich übergebe dieses Array hier.
Dies ist mein sogenannter Ausgangszustand.
Dann kann ich dieses Konzept vorerst loswerden.
Dies sagt reagieren, dass diese Komponente einen Zustand hat und dass dies mein Ausgangszustand ist.
Übrigens können Sie auch mehrere verschiedene Statusstücke haben, die alle unabhängig voneinander betrachtet werden.
Aber hier habe ich nur einen Hauptzustand und das ist meine Reihe von Zielen.
Und ich sage reagieren, dass ich diesen Zustand habe und dass dies mein Ausgangszustand ist.
Jetzt möchte ich natürlich Zugriff auf diesen Anfangszustandsspeicher und eine Konstante erhalten, damit ich ihn im Rest
der Komponente verwenden kann, da Core Scholes jetzt überall fehlt.
Sie geben also an, dass alle etwas zurückgegeben haben.
Es gibt ein Array mit genau zwei Elementen zurück.
Das erste Element ist immer unser aktueller Status-Snapshot.
Also entweder unser Ausgangszustand oder sobald wir ihn geändert haben, der aktualisierte Zustand.
Und das zweite Element dieses Arrays, das vom Verwendungsstatus zurückgegeben wird, ist eine Funktion, mit der wir diesen Status aktualisieren
können.
Ersetzen Sie es durch einen neuen Wert und teilen Sie "Reagieren" mit, dass es erneut gerendert werden soll.
Hier wird also die Strukturierung von Array D verwendet, indem eckige Klammern auf der linken Seite meiner gleichen Zeit verwendet werden, um
diese beiden Elemente zu extrahieren.
Ich habe ein Inde-Array nach Verwendungsstatus zurückgegeben.
Und es gibt immer genau zwei Elemente.
Es hängt also nicht davon ab, welche Art von Status-Tatta-Daten Sie hier übergeben.
Der Verwendungsstatus gibt Ihnen ein Array mit genau zwei Elementen.
Erstes Element, Ihr aktueller Zustand.
Also in meinem Fall mein Array hier.
Zweites Funktionselement zum Aktualisieren des Status.
Daher haben wir normalerweise als set bezeichnet.
Und dann einen beliebigen Namen Ihrer Wahl.
Setzen Sie sich in meinem Fall Kursziele.
Jetzt habe ich zwei Konstanten, die mit Hilfe von U erstellt wurden. S.
Die erste Konstante des Status enthält meinen Status-Snapshot.
Zweitens enthält die Konstante tatsächlich eine Funktion, die wir aufrufen können, um diesen Status-Snapshot zu aktualisieren.
Und wir werden diese Funktion hier aufrufen und ein neues Ziel hinzufügen.
Der Handler kann hier und jetzt festgelegte Kursziele nennen.
Ich möchte meine Kursziele aktualisieren, indem ich ein neues Ziel hinzufüge.
Eine einfache Form, dies zu tun, besteht darin, einfach meine alten Kursziele zu verwenden und hier concat aufzurufen, nicht push,
da push das vorhandene Element ändert und stattdessen Kursziele festlegt, sobald ein brandneues Array das alte Array und concat ersetzt Fügen
Sie einem Array ein Element hinzu, es wird jedoch ein neues Array zurückgegeben, zu dem dieses
Element hinzugefügt wurde.
Es gibt uns also ein brandneues Array, das das alte nicht berührt.
Und wir haben das brandneue Array nicht bestanden, um Kursziele zu setzen und zu reagieren.
Verwendet dann dieses brandneue Array unter der Haube, ersetzt den älteren Strahl in seinem intern
verwalteten Zustand und rendert diese Komponente erneut, sobald dies geschehen ist, und aktualisiert daher die Diskursziele konstant mit dem
neuen Array.
Im nächsten Renderzyklus, der dann bedeutet, dass React diese Funktion hier ausführt, wird in
diesem Fall angezeigt, dass neue Daten in Arjay X-Code sind.
Hier möchte ich mein neues Ziel erläutern.
Und wenn wir jetzt Sicherheit haben.
Und ich klicke auf Ziel hinzufügen. Sie sehen, dass der Liste neue Ziele hinzugefügt werden, da React Now diesen Bildschirm oder die Teile, die
neu gerendert werden müssen, erneut rendert.
Wann immer wir unseren Status jetzt aktualisieren, steht die genaue Reaktion auf das Rendern usw. nicht im Mittelpunkt dieses Kurses.
Sie können es lernen und spezielle Ressourcen wie die offiziellen Dokumente oder meinen vollständigen Leitfaden.
Im Moment genügt es zu beachten, dass man magisch und effizient reagiert.
Wird eine Seite oder Teile der Seite neu gerendert, die neu gerendert werden müssen?
Basierend auf den Statusänderungen, die wir angewendet haben.