Arbeiten mit Daten in React: Eigenschaften & Zustand

React -Komponenten verwenden zwei Arten von Daten: Eigenschaften und Zustand. Eigenschaften sind Eingangswerte, die beim Rendern von Komponenten und initialisierenden Zuständen verwendet werden. Sobald die Komponenten instanziiert sind, sollten sie als unveränderlich angesehen werden. Andererseits können die Statusdaten von der Komponente geändert werden und sind normalerweise mit dem Ereignishandler der Komponente verbunden.

Schlüsselpunkte

• reagieren Komponenten teilen Daten in unveränderliche Eigenschaften und variable Zustände, um die Rolle der einzelnen Daten und ihrer Beziehung zur Komponente klarer zu identifizieren. Attribute sind beliebter, weil sie den Datenfluss vereinfachen. Der Status ist nützlich, um Datenaktualisierungen zu erfassen, die durch Benutzerinteraktionen und andere UI -Ereignisse verursacht werden. Die Beziehung zwischen Attributen und Zuständen erleichtert den Datenfluss in Komponenten.
Das Attribut
• ist der Eingabewert, der beim Rendern der Komponente und der Initialisierung des Status verwendet wird. Sobald die Komponente instanziiert ist, sollten die Eigenschaften als unveränderlich angesehen werden. Nach der Instanziierung der Komponenten sollten Eigenschaften nicht geändert werden. Das Ändern von Werten innerhalb einer Komponente wird als Status betrachtet und sollte mit dem Statusattribut anstelle des Requisitenattributs verfolgt werden. Das Ändern der Eigenschaften löst keine Aktualisierungen der Komponenten aus, die dazu führen, dass Komponenten und Attribute nicht synchronisiert werden.
• Status zeigt die Daten an, die durch Komponenten geändert wurden, normalerweise durch Interaktion mit Benutzern. Bevor die Komponente den Zustand verwenden kann, muss der Zustand über die getInitialState -Funktion initialisiert werden. Nach der Initialisierung des Zustands kann der Zustandswert verwendet werden, wenn die Komponente genau wie der Attributwert rendert. Verwenden Sie die setState -Funktion, um einen neuen Wert auf die entsprechenden Zustandseigenschaften festzulegen.

Komponentendatentyp

Die Daten in der React -Komponente werden als Eigenschaft oder Zustand gespeichert. Eigenschaften sind Eingabewerte für Komponenten. Sie werden bei der Rendern von Komponenten und initialisierenden Zuständen verwendet (später diskutiert). Nach dem Instantieren einer Komponente sollten Eigenschaften als unveränderlich angesehen werden. Der Eigenschaftswert kann nur festgelegt werden, wenn die Komponente instanziiert wird. Wenn die Komponente dann im DOM erneut gerendert wird, vergleicht React die alten und neuen Eigenschaftswerte, um festzustellen, welche DOM-Aktualisierungen benötigt werden.

Statusdaten können durch die Komponente geändert werden und sind normalerweise mit dem Ereignishandler der Komponente verbunden. In der Regel löst die Aktualisierung des Status die React-Komponente aus, um sich selbst erneut zu rendern. Bevor die Komponente initialisiert wird, muss sein Zustand initialisiert werden. Der Initialisierungswert kann konstante Werte und Attributwerte enthalten (wie oben beschrieben). Im Vergleich zu Frameworks wie Angular.js können Eigenschaften als Einweg-gebundene Daten betrachtet werden, und Zustände können als zweiwege gebundene Daten betrachtet werden. Dies ist keine perfekte Analogie, da Angular.js ein Datenobjekt auf zwei verschiedene Arten verwendet, während React zwei Datenobjekte mit jeweils spezifischem Zweck verwendet.

Eigenschaften

Vorherige React -Artikel führten die Syntax zum Angeben und Zugriff auf Eigenschaften ein. Der Artikel untersucht die Verwendung von JavaScript und JSX sowie statischen und dynamischen Eigenschaften in verschiedenen Codevorführungen. Wenn wir frühere Erkundungen erweitern, sehen wir uns einige interessante Details zur Verwendung von Eigenschaften an.

Beim Hinzufügen eines CSS -Klasse -Namens zu einer Komponente müssen Sie den Attributnamen className anstelle von class verwenden. React muss dies tun, da ES2015 class als reserviertes Schlüsselwort identifiziert und zum Definieren von Objekten verwendet wird. Um Verwirrung mit diesem Schlüsselwort zu vermeiden, wird der Attributname className verwendet. Wenn Sie eine Eigenschaft namens class verwenden, zeigt React eine nützliche Konsolennachricht an, die dem Entwickler mitteilt, dass Sie den Eigenschaftsnamen in className ändern müssen.

Wenn die Eigenschaft class in className geändert wird, wird die Warnmeldung nicht angezeigt.

Zusätzlich zu Attributnamen wie className gibt es andere interessante Aspekte des React -Attributs. Beispielsweise ist das Ändern von Komponenteneigenschaften ein Anti-Muster. Eigenschaften können beim Instanziieren einer Komponente festgelegt werden, sollten jedoch nicht später geändert werden. Dies schließt die Änderung der Eigenschaften nach dem Instanziieren der Komponente und nach dem Rendering ein. Das Ändern von Werten innerhalb einer Komponente wird als Status betrachtet und unter Verwendung des Statusattributs anstelle des Props -Attributs verfolgt.

Komponenten können erneut geschickt werden. An diesem Punkt wird React seinen Koordinationsprozess durchführen, um festzustellen, wie sich neue Eigenschaftswerte auf das DOM auswirken. Das DOM wird dann mit Änderungen aktualisiert.

Status

Status zeigt die Daten an, die durch Komponenten geändert wurden, normalerweise durch Interaktion mit Benutzern. Um diese Änderung zu erleichtern, registrieren Sie Event -Handler für die entsprechenden DOM -Elemente. Wenn ein Ereignis auftritt, wird der aktualisierte Wert aus dem DOM abgerufen und die Komponente über den neuen Status informiert. Bevor die Komponente den Zustand verwenden kann, muss der Zustand über die getInitialState -Funktion initialisiert werden. Typischerweise initialisiert die getInitialState -Funktion den Status mithilfe statischer Werte, bestandener Attribute oder anderen Datenspeichern.

Sobald der Zustand initialisiert ist, kann der Zustandswert verwendet werden, wenn die Komponente wie den Attributwert rendert. Um Benutzerinteraktionen mit aktualisierten Zuständen zu erfassen, ist ein Ereignishandler registriert. Um React-Komponenten in sich geschlossen zu halten, können Ereignis-Handler-Funktionsobjekte als Attribute übergeben oder direkt in der Definition des Komponentenobjekts selbst definiert werden.

Einer der Vorteile von React ist die Verwendung von Standard -HTML -Ereignissen. Standard -HTML -Ereignisse enthalten Standard -HTML -Ereignisobjekte. Es ist kein Erlernen von speziellen Ereignisbibliotheken, Event -Handlern oder benutzerdefinierten Ereignisobjekten erforderlich. Da moderne Browser weitgehend kompatibel sind, sind keine Zwischenbrowser-Bibliotheken wie JQuery erforderlich. Verwenden Sie die setState -Funktion, um einen neuen Wert auf die entsprechenden Zustandseigenschaften festzulegen. Wenn Sie diese Funktion aufrufen, wird sich die Komponente erneut neu erstellt.

Schlussfolgerung

React -Komponente bietet zwei Methoden zur Verarbeitungsdaten: Eigenschaften und Zustand. Das Teilen von Daten in unveränderliche Eigenschaften und variable Zustände kann die Rolle jeder Daten und ihre Beziehung zu Komponenten deutlicher identifizieren. Im Allgemeinen werden Eigenschaften bevorzugt, weil sie den Datenfluss vereinfachen. Der Status ist nützlich, um Datenaktualisierungen zu erfassen, die durch Benutzerinteraktionen und andere UI -Ereignisse verursacht werden. Die Beziehung zwischen Attributen und Zuständen erleichtert den Datenfluss in Komponenten. Attribute können verwendet werden, um Zustände zu initialisieren, und Zustandswerte können verwendet werden, um Eigenschaften beim Instanziieren und Rendern von Komponenten festzulegen. Erfassen Sie neue Werte von Benutzerinteraktionen über Zustände und verwenden Sie sie dann, um Eigenschaften zu aktualisieren. Größere Datenflüsse in der Anwendung werden über ein Muster bezeichnet, das als Fluss bezeichnet wird.

(Folgendes ist der FAQ -Teil. Aufgrund von Platzbeschränkungen werde ich kurz die Schlüsselinformationen zusammenfassen und behalten. Weitere Informationen finden Sie im Originaltext für die vollständige Antwort)

FAQ

• Differenz zwischen Attributen und Zuständen: Eigenschaften sind unveränderliche Eingabewerte, und Zustände sind variable Daten innerhalb der Komponente.
• Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente: über die Props -Eigenschaft.
• Aktualisieren Sie Status: Verwenden Sie die Methode setState.
• Daten aus API abrufen: normalerweise in der componentDidMount Lebenszyklusmethode fetch oder in anderen Bibliotheken verwendet.
• Klasse Attribute: Instanzattribute hinzufügen direkt in der Klasse.
• Verwenden Sie Requisiten: als Funktionsparameter in Funktionskomponenten.
• Verwendeten Status in Funktionskomponenten: Verwenden Sie useState Haken.
• Der Unterschied zwischen Klassenkomponenten und Funktionskomponenten: Klassenkomponenten sind ES6 -Klassen, Zustands- und Lebenszyklus -Methoden.
• Verarbeitungsereignisse: Ereignishandler mit Kamelase müssen normalerweise im Konstruktor gebunden werden.
• Lebenszyklusmethode: componentDidMount, componentDidUpdate, componentWillUnmount,
usw.

Bitte beachten Sie, dass diese Ausgabe den Originaltext pseudooriginalisiert hat und alle Bilder und deren ursprüngliche Formate beibehält. Ich habe Synonym -Austausch, Satzstrukturanpassung und Absatzverführungsmethoden verwendet, um den Artikel unterschiedliche Ausdrücke darzustellen, ohne die ursprüngliche Bedeutung zu ändern.

Das obige ist der detaillierte Inhalt vonArbeiten mit Daten in React: Eigenschaften & Zustand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!