Setstate In Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Durch das Verfolgen des Status einer Anwendung protokolliert eine Single-Page-Anwendung (SAP) Änderungen und meldet sie dem Benutzer. Im Gegensatz zu einem Template-Framework, View, Controller (MVC) leitet SAP den Benutzer nicht um und benötigt daher eine Möglichkeit, anstehende Änderungen auf der Client-Seite zu verwalten. Informationen zum Überprüfen von MVC-Frameworks finden Sie in diesem -Leitfaden.

In React können Komponenten selbst ihren eigenen Zustand handhaben und entsprechend neu erstellen. Dies geschieht durch Lebenszyklusmethoden, die hier ausführlich besprochen werden. Für die Zwecke dieses Artikels werfen wir einen Blick darauf, wie man Zustände mit setState ändert.

Diese Anleitung setzt einige grundlegende Vertrautheit mit React voraus. Um die React-Grundlagen zu wiederholen oder zu lernen, listet dieser Artikel einige der besten React-Lernressourcen auf.

Was ist React setState?

Die setState-Methode von React ist wie das Ändern des Zustands einer Komponente mit Stabilität. Es gibt ein paar spezifische Regeln für das Ändern des Status in React.

  1. setState kann nicht in einer Klassenkomponente aufgerufen werden. Die Komponenten der Klasse rufen die Konstruktor()-Methode auf und setzen sie auf einen Anfangszustand. Dann können wir den Zustand weiter unten ändern, indem wir setState aufrufen.
    Es gibt zwei verschiedene Arten von Komponenten in React. Es ist die funktionale Komponente und die Klassenkomponente. Für unsere Zwecke sprechen wir nur mit den Komponenten der Klasse. Weitere Einzelheiten finden Sie in diesem
    Artikel über die Unterschiede zwischen Funktions- und Klassenkomponenten.
  2. Indem Sie nur setState aufrufen B. einer Klassenkomponente, können wir mit dem Schlüsselwort this direkt auf die Komponente selbst verweisen. Das Aufrufen von this.setState () ist Best Practice und stellt sicher, dass Ihr Code nicht beschädigt wird.
  3. Ändern Sie den Status nicht direkt. Direkte Statusänderungen werden nicht auf React to Spawning aufgezeichnet. Der ganze Sinn der Zustandsänderung besteht darin, eine neue Interpretation dieser Komponente auszulösen, um die am Benutzer vorgenommenen Änderungen widerzuspiegeln.

Sehen wir uns nun die Syntax im Kontext dieser Richtlinien an.

setState React-Syntax

Aus der ersten Richtlinie sehen Sie, dass wir setState nur innerhalb einer Klassenkomponente verwenden können. Nehmen wir beispielsweise an, Sie haben eine Business-App und möchten einen Einkaufswagen implementieren. Wir könnten eine Klassenkomponente namens „shopping cart“ einrichten. Diese Komponente ist für die Verwaltung ihres eigenen Status verantwortlich, wenn ein Benutzer einen Artikel zu seinem Einkaufswagen hinzufügt.

Indem wir den obigen Code aufschlüsseln, deklarieren wir die Cart-Klassenkomponente Wie alle Klassenkomponenten erweitern wir response .Component. Dies ist der Standard React-Syntax.

Da wir diesem Bereich einen Status zuweisen möchten, müssen wir die Konstruktormethode aufrufen. Daher wird der Basiskonstruktor mit super (props) aufgerufen. Sie können sehen, dass der Basisbauer nicht mit irgendwelchen Requisiten aufgerufen wird. Die offizielle React-Dokumentation fordert, dass die Basiskonstruktormethode immer mit Props aufgerufen werden sollte

Nun, da wir die notwendige React-Syntax durchgearbeitet haben, um eine Klassenkomponente zur Aufrechterhaltung des Zustands zu erstellen, können wir unseren Anfangszustand beeinflussen. Dies ist das einzige Mal, dass wir direkt auf den Zustand verweisen können. Status zuweisen durch Der Aufruf von this.state =. {ShoppingCart: []} ermöglicht es uns, den Anfangszustand unseres Einkaufswagens auf ein leeres Array zu setzen <

h2> React example setState

Im vorherigen Abschnitt haben wir die Syntax untersucht, die zum Deklarieren eines Anfangszustands erforderlich ist. Sobald der Zustand in der Konstruktormethode festgelegt ist, können wir wie gewohnt rendern:

Ihr Warenkorb

); }} ReactDOM.render (, document.getElementById (`root`));

Hier haben wir eine Klassenkomponente mit ihrem Anfangszustand set basket und sie zeigt den Korb in der Return-Deklaration der Render-Methode an. Mal sehen, wie wir setState verwenden können, um unseren Warenkorb zu aktualisieren.

Wir definieren eine Funktion, die unserem Einkaufswagen einen neuen Artikel hinzufügt, während die zuvor hinzugefügten Artikel beibehalten werden. Wir Verwenden Sie den Operator JavaScript diffusion (.. .) , um eine Kopie des Ausgangszustands zu erstellen und mit dem neuen Zustand auf den neuesten Stand zu bringen Warenkorb enthält alle hinzugefügten Elemente.

Die addItem-Funktion kann im onClick React-Attribut einer Schaltfläche verwendet werden, wenn wir möchten, dass der Benutzer diesen Artikel hinzufügen kann, wann eine Schaltfläche klickt Für unsere Zwecke ist es ausreichend, siehe So verwenden Sie setState in einem Teil einer Funktion cient.

Dieser Artikel ist als Einführung in die Verwendung von setState gedacht und erhebt keinen Anspruch auf Vollständigkeit.

Fazit

In diesem Artikel haben wir gelernt, was setState ist, Richtlinien zur Verwendung, Syntax und ein kurzes Beispiel. Dies soll eine Artikelgrundlage sein, die Sie dazu anregt, tiefer zu graben und die Praxis des Setzens zu aktualisieren, um einen Status der Komponenten zu aktualisieren, die Sie

offizielle React-Dokumentation enthält zusätzliche Beispiele, die mehr Übungsmöglichkeiten bieten. Denken Sie daran, dass bei der Anwendung einer einzelnen Seite das Verfolgen des Status einer Komponente unerlässlich ist, um Änderungen für den Benutzer vorzunehmen.