Sind Sie neugierig auf React und wollen seine Tricks lernen? Vielleicht haben Sie in der Vergangenheit Tutorials ausprobiert, hatten aber Schwierigkeiten, die Kernkonzepte von State zu verstehen? Vielleicht sind Sie auf der Suche nach einem Framework für Ihr Projekt?
React.js ist eine der beliebtesten JavaScript-Bibliotheken der Welt und wurde 2013 von Facebook entwickelt. Sie eignet sich am besten für Single-Page-Anwendungen mit dynamischen Inhalten und progressive Webanwendungen. Eigentlich ist es eine gute Wahl für jede Art von Webentwicklung, die den Aufbau schneller, skalierbarer und wartbarer Lösungen erfordert.
Wenn Sie eine E-Commerce-Plattform, eine Essenslieferungs-App, ein Analyse-Tool, einen Messenger oder eine Unternehmens-App entwickeln möchten, ist React.js die richtige Wahl für Sie.
Wenn Sie React.js bereits kennen, können Sie das React Native-Framework leicht beherrschen, das den Einstieg in die Entwicklung mobiler Apps ermöglicht und iOS- und Android-Nutzern ein natives Erlebnis bietet.
Es wird von Websites wie Facebook, Instagram, Netflix und der New York Times verwendet. Mit React erhalten wir hohe Geschwindigkeit, einfache Skalierung und Entwicklung. In diesem Artikel werden wir State analysieren – einen der wichtigsten Aspekte von React.js.
Inhalt:
- Was ist State?
- State Initialisierung
- Arbeiten mit State
- prevState verwenden
Was ist State in React.js?
State in React.js ist ein Standard-Javascript-Objekt, dessen Hauptzweck die Interaktivität ist, die für die Fixierung und Übertragung von Daten notwendig ist, die nach einer gewissen Zeit geändert werden können. Die Änderung des Zustands hängt von der Funktionalität der Anwendung ab. Die Änderungen können auf der Reaktion der Benutzer, neuen Nachrichten auf der Serverseite, der Reaktion des Netzwerks usw. beruhen. Die einzige Anforderung, die React an den State stellt, ist der Datentyp: Es muss sich um ein Objekt handeln. Eine Anwendung definiert, was darin gespeichert wird.
State Initialisierung
Die State-Initialisierung wird nur innerhalb von klassenbasierten Komponenten ausgeführt, die zustandsbehaftete Komponenten sind (mit internem State).
Es gibt zwei Möglichkeiten, den State in React.js zu initialisieren:
1) Innerhalb des Konstruktors
this.state = { ... }
Beachten Sie, dass state eine Eigenschaft von Klassenkomponenten ist, und nach der Erstellung einer Komponentenklasse ist die erste angeforderte Methode ein Konstruktor, der ein perfekter Ort für die Initialisierung des Status und alles andere ist.
Ein Klassenbeispiel wird ebenfalls im Speicher erstellt, und Sie können dessen `this` für die Installation von Eigenschaften verwenden `this.state` = (7 Zeilen). Der Konstruktor ist der einzige Ort, an dem Sie durch das Gleichheitszeichen schreiben können.
Es ist auch wichtig, `super(props)` (5 Zeilen) anzufordern – den Konstruktor der Basisklasse. Dieser Konstruktor fordert standardmäßig super mit allen übergebenen Argumenten an.
2) Direkt innerhalb der Klasse
state = { ... }
Zum Zeitpunkt der Erstellung dieses Artikels ist die zweite Option zur Initialisierung des Zustands nicht Teil der offiziellen JS-Spezifikation. Wir brauchen also eine Babel – Stage 3, um sie auszuführen.
In diesem Fall gibt es keinen Konstruktor. Die Referenz auf den State wird direkt ausgeführt. Der visuelle Bereich befindet sich innerhalb der Klasse, aber nicht innerhalb der Methode und Sie können `this.props`, React.js `this.state` anfordern.
Welche Methode wählen Sie?
Das bleibt Ihnen überlassen. Wir bevorzugen die zweite Option.
Arbeiten mit State
Unser State enthält ein Objekt mit zwei Feldern: firstName und lastName. Unabhängig davon, welche Option wir für seine Initialisierung verwenden, werden wir uns über `this.state.nameState` darauf beziehen. Wir können dies in den Methoden des Lebenszyklus der Komponente oder in den Methoden tun, die wir in unsere Klasse schreiben werden.
Im folgenden Beispiel importieren wir mit der Methode render() Daten aus dem state:
Entwickler schreiben in der Regel genaueren Code, indem sie (ES6) für State verwenden:
Ein solcher Code führt zu folgendem Ergebnis:
Zustandsverwaltung mit Hilfe von setState()
Um den Status zu verwalten, bietet React eine spezielle `setState()`-Methode. Wir sollten darauf achten, wie sie funktioniert. Wir bieten ein Objekt an, das einen Teil der Informationen enthält, die wir aktualisieren wollen. Am Anfang werden die Werte im übermittelnden Objekt gleich den Werten der Komponente State sein, und dann wird `setState()` den State entweder aktualisieren oder neue Werte hinzufügen.
Als Beispiel fügen wir eine Schaltfläche hinzu, deren Anklicken mit Hilfe der Methode handleClick den Zustand ändert:
Nachdem die handleClick-Methode angefordert wurde, wird darin eine `this.setState({ firstName: ‘Michael’ })` Methode angefordert, bei der wir den Wert firstName in ‘Michael’ ändern. Danach fügt React den bereits existierenden Status mit einem Objekt zusammen, das an `setState()` übergeben wird.
setState wendet nur den Teil des State an, der geändert werden muss. Dieses neue Objekt wird über den bestehenden State gelegt. Dies ist ein sehr praktisches Feature von React, das als Schutz vor Fehlern dient und das Schreiben eines saubereren Codes ermöglicht.
Als nächstes startet setState den Prozess der Synchronisation mit dem DOM, erstellt einen neuen Elementbaum des virtuellen ReactDOMs, vergleicht ihn mit dem vorherigen Elementbaum und definiert schließlich, was passiert ist und wie man es am besten ausführt. Danach wird das endgültige DOM im Browser aktualisiert, und wir erhalten First Name: Michael.
Verwendung von prevState
Um zu verstehen, was prevState ist, lassen Sie uns eine Komponente mit einem Kontrollkästchen erstellen. Wenn wir sie anklicken, wird ihr Attribut auf chosen/unchosen geändert.
Auf den ersten Blick scheint es logisch, in `setState` false auf true mit einem Ausrufezeichen zu ändern und umgekehrt, genau wie im Beispiel unten:
Aber das ist falsch. Es ist sehr wichtig zu verstehen, dass die Methode `setState()` in einigen Fällen asynchron arbeitet. Nicht immer, aber in bestimmten Fällen. Daher kann man davon ausgehen, dass der Status nicht sofort, sondern erst nach einer Weile installiert wird. Wenn also ein Benutzer auf das Kontrollkästchen klickt und wir handleClick aufrufen, wird der Wert `this.state` möglicherweise nicht aktualisiert. React tut dies, um die Leistung zu optimieren. React kann bei mehreren Aufrufen von `setState()` während der Leistungsoptimierung nur eine Zustandsaktualisierung einer Anwendung durchführen. Mit anderen Worten, wir können nicht erwarten, dass unser State seine neueste Version darstellt.
Um das zu beheben, müssen wir `setState` auf eine andere Art und Weise aufrufen. Anstatt einen neuen State zu übergeben, den wir aktualisieren wollen, werden wir eine weitere Funktion an `setState` übergeben, die unseren aktuellen State empfängt, `this.setState(( prevState ) => {})`. Dies ist ein Signal an React, dass setState nur dann ausgeführt werden muss, wenn unser aktueller State im Endzustand ist und bereit ist, einen neuen State zu berechnen.
Wenn Sie einen neuen Status berechnen, verwenden Sie immer eine Option mit einer Funktion, die vom aktuellen Status abhängt.
Ändern wir unsere handleClick-Methode wie im Beispiel unten gezeigt, und alles wird richtig funktionieren:
Schlussfolgerungen:
- Der Zustand der Komponente ist im Feld State enthalten;
- `this.state` wird im Konstruktor oder im Klassenkörper initialisiert;
- Nach der Initialisierung kann der Status nicht mehr geändert werden (nur lesend);
- Um den Status zu aktualisieren, verwenden Sie die Methode `setState()`;
- In setState() ist es notwendig, nur den geänderten Zustand zu übertragen;
- Eine Statusaktualisierung, die vom vorherigen Status abhängt, muss über die Funktion `setState` ausgeführt werden.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu verstehen, was State ist und wie man ihn benutzt.
Über Redwerk
Wir sind ein Offshore-Softwareentwicklungsunternehmen, das sich durch die Erstellung von Web-, Mobil- und Desktop-Anwendungen in verschiedenen Programmiersprachen, einschließlich React, ausgezeichnet hat. Unsere Kernspezialisierung umfasst E-Commerce, Business Automation, E-Health, Media & Entertainment, E-Government, GameDev, Startups & Innovation. Redwerk hat hunderte von Projekten für Kunden auf der ganzen Welt erfolgreich durchgeführt. Mit einer Leidenschaft für Perfektion verfolgen wir ständig die Innovationen in der IT-Branche und wenden sie in unserer Arbeit an.
