Ich habe mir einen Pluralsight-Kurs über React angesehen und der Ausbilder erklärte, dass die Requisiten nicht gewechselt werden sollten. Ich lese jetzt einen Artikel (uberVU / React-Guide) über Requisiten gegen Staat und es heißt
Sowohl Requisiten als auch Statusänderungen lösen ein Render-Update aus.
Später im Artikel heißt es:
Requisiten (kurz für Eigenschaften) sind die Konfiguration einer Komponente und deren Optionen, wenn Sie möchten. Sie werden von oben empfangen und sind unveränderlich.
- Requisiten können sich also ändern, aber sie sollten unveränderlich sein?
- Wann sollten Sie Requisiten verwenden und wann sollten Sie state verwenden?
- Wenn Sie Daten haben, die eine React-Komponente benötigt, sollten diese über Requisiten weitergeleitet oder in der React-Komponente eingerichtet werden
getInitialState
?
javascript
reactjs
skaterdav85
quelle
quelle
Antworten:
Requisiten und Zustand hängen zusammen. Der Status einer Komponente wird häufig zu den Requisiten einer untergeordneten Komponente. Requisiten werden innerhalb der Rendermethode des übergeordneten Elements an das untergeordnete Element als zweites Argument an
React.createElement()
oder, wenn Sie JSX verwenden, an die bekannteren Tag-Attribute übergeben.Der Statuswert des Elternteils von
childsName
wird zum Wert des Kindesthis.props.name
. Aus der Sicht des Kindes ist der Name Prop unveränderlich. Wenn es geändert werden muss, sollte das übergeordnete Element nur seinen internen Status ändern:und React wird es für Sie an das Kind weitergeben. Eine natürliche Folgefrage lautet: Was ist, wenn das Kind seinen Namen ändern muss? Dies erfolgt normalerweise über untergeordnete Ereignisse und übergeordnete Rückrufe. Das Kind kann beispielsweise ein Ereignis anzeigen, das aufgerufen wird
onNameChanged
. Das übergeordnete Element würde das Ereignis dann abonnieren, indem es einen Rückruf-Handler übergibt.Das Kind würde seinen angeforderten neuen Namen als Argument an den Ereignisrückruf übergeben, indem es z. B. aufruft
this.props.onNameChanged('New name')
, und das Elternteil würde den Namen im Ereignishandler verwenden, um seinen Status zu aktualisieren.quelle
Übergeben Sie für die Eltern-Kind-Kommunikation einfach Requisiten.
Verwenden Sie state , um die Daten, die Ihre aktuelle Seite benötigt, in Ihrer Controller-Ansicht zu speichern.
Verwenden Sie Requisiten , um Daten- und Ereignishandler an Ihre untergeordneten Komponenten weiterzugeben.
Diese Listen sollen Ihnen bei der Arbeit mit Daten in Ihren Komponenten helfen.
Requisiten
Zustand
quelle
Einfach gesagt,
Zustand ist der lokale Zustand des Bauteils , die nicht zugegriffen werden kann und außerhalb der Komponente modifiziert ist . Es entspricht lokalen Variablen in einer Funktion.
Einfache JS-Funktion
Komponente reagieren
Requisiten hingegen machen Komponenten wiederverwendbar, indem sie Komponenten die Möglichkeit geben, Daten von ihrer übergeordneten Komponente in Form von Requisiten zu empfangen. Sie entsprechen Funktionsparametern.
Einfache JS-Funktion
Komponente reagieren
Credits: Manoj Singh Negi
Artikel Link: React State vs Requisiten erklärt
quelle
Die Zusammenfassung von Requisiten und Status, die mir am besten gefällt, ist hier: React-Guide Big Hat Tipp an diese Jungs. Unten finden Sie eine bearbeitete Version dieser Seite:
Requisiten gegen Staat
tl; dr Wenn eine Komponente zu einem bestimmten Zeitpunkt eines ihrer Attribute ändern muss, sollte dieses Attribut Teil ihres Status sein, andernfalls sollte es nur eine Requisite für diese Komponente sein.
Requisiten
Requisiten (kurz für Eigenschaften) sind die Konfiguration einer Komponente. Sie werden von oben empfangen und sind für die Komponente, die sie empfängt, unveränderlich. Eine Komponente kann ihre Requisiten nicht ändern, ist jedoch dafür verantwortlich, die Requisiten ihrer untergeordneten Komponenten zusammenzustellen. Requisiten müssen nicht nur Daten sein - Rückruffunktionen können als Requisiten übergeben werden.
Zustand
Der Status ist eine Datenstruktur, die mit einem Standardwert beginnt, wenn eine Komponente bereitgestellt wird. Es kann im Laufe der Zeit mutiert sein, hauptsächlich aufgrund von Benutzerereignissen.
Eine Komponente verwaltet ihren eigenen Status intern. Abgesehen davon, dass es einen Anfangszustand festlegt, hat es nichts damit zu tun, mit dem Zustand seiner Kinder zu spielen. Sie können sich den Status als privat für diese Komponente vorstellen.
Requisiten und Zustand ändern
Sollte diese Komponente einen Status haben?
Der Status ist optional. Da der Zustand die Komplexität erhöht und die Vorhersagbarkeit verringert, ist eine Komponente ohne Zustand vorzuziehen. Auch wenn Sie in einer interaktiven App eindeutig nicht auf den Status verzichten können, sollten Sie vermeiden, zu viele Stateful Components zu haben.
Komponententypen
Zustandslose Komponente Nur Requisiten, kein Status. Außer der Funktion render () ist nicht viel los. Ihre Logik dreht sich um die Requisiten, die sie erhalten. Dies macht es sehr einfach, ihnen zu folgen und sie zu testen.
Stateful Component Sowohl Requisiten als auch State. Diese werden verwendet, wenn Ihre Komponente einen bestimmten Status beibehalten muss. Dies ist ein guter Ort für die Client-Server-Kommunikation (XHR, Web-Sockets usw.), die Verarbeitung von Daten und die Reaktion auf Benutzerereignisse. Diese Art von Logistik sollte in einer moderaten Anzahl von Stateful Components zusammengefasst sein, während die gesamte Visualisierungs- und Formatierungslogik in viele Stateless Components nachgeschaltet werden sollte.
Quellen
quelle
Der Status ist also einfach auf Ihre aktuelle Komponente beschränkt, aber Requisiten können an jede gewünschte Komponente übergeben werden ... Sie können den Status der aktuellen Komponente als Requisite an andere Komponenten übergeben ...
Auch in React haben wir zustandslose Komponenten, die nur Requisiten und keinen internen Zustand haben ...
Das folgende Beispiel zeigt, wie sie in Ihrer App funktionieren:
Übergeordnet (zustandsreiche Komponente):
Kind (zustandslose Komponente):
quelle
Der Hauptunterschied zwischen Requisiten und Status besteht darin, dass der Status intern ist und von der Komponente selbst gesteuert wird, während die Requisiten extern sind und von dem gesteuert werden, was die Komponente darstellt.
quelle
Grundsätzlich besteht der Unterschied darin, dass der Status so etwas wie Attribute in OOP ist : Es ist etwas Lokales für eine Klasse (Komponente), das zur besseren Beschreibung verwendet wird. Requisiten sind wie Parameter - sie bestehen auf eine Komponente von dem Anrufer einer Komponente (die Eltern): als ob Sie eine Funktion mit bestimmten Parametern aufgerufen.
quelle
Sowohl der Status als auch die reagierenden Requisiten werden verwendet, um Daten in eine Komponente zu steuern. Im Allgemeinen werden Requisiten von übergeordneten Komponenten festgelegt und an untergeordnete Komponenten übergeben und in der gesamten Komponente festgelegt. Für Daten, die sich ändern werden, müssen wir state verwenden. Und Requisiten sind unveränderlich, während Zustände veränderbar sind. Wenn Sie Requisiten ändern möchten, können Sie dies von der übergeordneten Komponente aus tun und dann an untergeordnete Komponenten übergeben.
quelle
wie ich bei der arbeit mit reagieren gelernt habe.
Requisiten werden von einer Komponente verwendet , um Daten aus einer externen Umgebung abzurufen, dh einer anderen Komponente (rein, funktional oder Klasse) oder einer allgemeinen Klasse oder einem Javascript / Typoskript- Code
Zustände werden verwendet , um die interne Umgebung einer Komponente zu verwalten, dh die Daten ändern sich innerhalb der Komponente
quelle
Requisiten: Requisiten sind nichts anderes als eine Eigenschaft der Komponente, und die Reaktionskomponente ist nichts anderes als eine Javascript-Funktion.
const element =;
Hier wird
<Welcome name="Sara" />
ein Objekt {name: 'Sara'} als Requisiten der Welcome-Komponente übergeben. Um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben, verwenden wir Requisiten. Requisiten sind unveränderlich. Während des Lebenszyklus einer Komponente sollten sich die Requisiten nicht ändern (als unveränderlich betrachten).Status: Auf den Status kann nur innerhalb der Komponente zugegriffen werden. Um die Daten innerhalb der Komponente zu verfolgen, verwenden wir state. Wir können den Status durch setState ändern. Wenn wir den Zustand an das Kind weitergeben müssen, müssen wir ihn als Requisiten weitergeben.
quelle
Zustand:
Requisiten:
quelle
Grundsätzlich sind Requisiten und Status zwei Möglichkeiten, wie die Komponente wissen kann, was und wie gerendert werden soll. Welcher Teil des Anwendungsstatus zum Status gehört und welcher zu einem Top-Level-Store, hängt mehr mit Ihrem App-Design zusammen als mit der Funktionsweise von React. Die einfachste Möglichkeit, IMO zu entscheiden, besteht darin, zu überlegen, ob dieses bestimmte Datenelement für die gesamte Anwendung nützlich ist oder ob es sich um lokale Informationen handelt. Es ist auch wichtig, den Status nicht zu duplizieren. Wenn also einige Daten aus Requisiten berechnet werden können, sollten sie aus Requisiten berechnet werden.
Angenommen, Sie haben ein Dropdown-Steuerelement (das die Standard-HTML-Auswahl für das benutzerdefinierte Styling umschließt), mit dem a) ein Wert aus der Liste ausgewählt und b) geöffnet oder geschlossen werden kann (dh die angezeigte oder ausgeblendete Optionsliste). Angenommen, Ihre App zeigt eine Liste mit Elementen an und Ihre Dropdown-Steuerelemente filtern nach Listeneinträgen. Dann ist es am besten, den aktiven Filterwert als Requisite zu übergeben und den geöffneten / geschlossenen Zustand lokal zu halten. Um es funktionsfähig zu machen, würden Sie außerdem einen onChange-Handler von der übergeordneten Komponente übergeben, der im Dropdown-Element aufgerufen wird, und aktualisierte Informationen (neu ausgewählter Filter) sofort an den Speicher senden. Andererseits kann der geöffnete / geschlossene Zustand in der Dropdown-Komponente beibehalten werden, da es dem Rest der Anwendung egal ist, ob das Steuerelement geöffnet ist, bis der Benutzer seinen Wert tatsächlich ändert.
Der folgende Code funktioniert nicht vollständig, er benötigt CSS und die Behandlung von Dropdown-Klick- / Unschärfe- / Änderungsereignissen, aber ich wollte das Beispiel minimal halten. Hoffe es hilft den Unterschied zu verstehen.
quelle
Status ist die Art und Weise, wie Reag mit den Informationen Ihrer Komponente umgeht.
Angenommen, Sie haben eine Komponente, die einige Daten vom Server abrufen muss. Normalerweise möchten Sie den Benutzer informieren, wenn die Anforderung verarbeitet wird, wenn sie fehlgeschlagen ist usw. Dies ist eine Information, die nur für diese bestimmte Komponente relevant ist. Hier kommt der Staat ins Spiel.
Normalerweise lässt sich der Status am besten wie folgt definieren:
Aber in den neuesten Implementierungen von React Native können Sie einfach Folgendes tun:
Diese beiden Beispiele werden genauso ausgeführt, es handelt sich lediglich um eine Verbesserung der Syntax.
Was unterscheidet sich also davon, nur Objektattribute zu verwenden, wie wir es bei der OO-Programmierung immer getan haben? Normalerweise sind die in Ihrem Bundesstaat gespeicherten Informationen nicht statisch. Sie ändern sich im Laufe der Zeit und Ihre Ansicht muss aktualisiert werden, um diese Änderungen widerzuspiegeln. State bietet diese Funktionalität auf einfache Weise an.
Staat bedeutet, unveränderlich zu sein! und ich kann das nicht genug betonen. Was bedeutet das? Es bedeutet, dass Sie so etwas NIEMALS tun sollten.
Die richtige Vorgehensweise ist:
Wenn Sie this.setState verwenden, durchläuft Ihre Komponente den Aktualisierungszyklus. Wenn sich ein Teil des Status ändert, wird Ihre Komponenten-Rendermethode erneut aufgerufen, um diese Änderungen widerzuspiegeln.
Weitere ausführliche Erklärungen finden Sie in den Reaktionsdokumenten: https://facebook.github.io/react/docs/state-and-lifecycle.html
quelle
Requisiten sind einfach eine Abkürzung für Eigenschaften. Requisiten sind, wie Komponenten miteinander sprechen. Wenn Sie mit React überhaupt vertraut sind, sollten Sie wissen, dass Requisiten von der übergeordneten Komponente nach unten fließen.
Es gibt auch den Fall, dass Sie Standard-Requisiten haben können, so dass Requisiten festgelegt werden, auch wenn eine übergeordnete Komponente Requisiten nicht weitergibt.
Aus diesem Grund wird React als unidirektionaler Datenfluss bezeichnet. Dies erfordert ein wenig Zeit und ich werde wahrscheinlich später darüber bloggen, aber denken Sie vorerst daran: Daten fließen von Eltern zu Kindern. Requisiten sind unveränderlich (schickes Wort dafür ändert sich nicht)
Wir sind also glücklich. Komponenten erhalten Daten vom übergeordneten Element. Alles sortiert, richtig?
Nicht ganz. Was passiert, wenn eine Komponente Daten von einer anderen Person als der übergeordneten Komponente empfängt? Was ist, wenn der Benutzer Daten direkt in die Komponente eingibt?
Nun, deshalb haben wir Staat.
ZUSTAND
Requisiten sollten sich nicht ändern, also steigt der Status. Normalerweise haben Komponenten keinen Status und werden daher als zustandslos bezeichnet. Eine Komponente, die state verwendet, wird als stateful bezeichnet. Fühlen Sie sich frei, diesen kleinen Leckerbissen auf Partys fallen zu lassen und zu beobachten, wie sich Leute von Ihnen entfernen.
Der Status wird also verwendet, damit eine Komponente Informationen zwischen den von ihr ausgeführten Renderings verfolgen kann. Wenn Sie setState festlegen, wird das Statusobjekt aktualisiert und die Komponente erneut gerendert. Das ist super cool, denn das bedeutet, dass React sich um die harte Arbeit kümmert und unglaublich schnell ist.
Als kleines Beispiel für den Status finden Sie hier einen Ausschnitt aus einer Suchleiste (sehen Sie sich diesen Kurs an, wenn Sie mehr über React erfahren möchten.)
ZUSAMMENFASSUNG
Requisiten und Staat machen ähnliche Dinge, werden aber auf unterschiedliche Weise verwendet. Die meisten Ihrer Komponenten sind wahrscheinlich zustandslos.
Requisiten werden verwendet, um Daten vom Elternteil zum Kind oder von der Komponente selbst zu übergeben. Sie sind unveränderlich und werden daher nicht verändert.
Der Status wird für veränderbare Daten oder Daten verwendet, die sich ändern. Dies ist besonders nützlich für Benutzereingaben. Denken Sie zum Beispiel an Suchleisten. Der Benutzer gibt Daten ein und aktualisiert, was er sieht.
quelle
Zusamenfassend.
quelle
state - Dies ist eine spezielle veränderbare Eigenschaft, die Komponentendaten enthält. Es hat den Standardwert, wenn Componet bereitgestellt wird.
Requisiten - Es handelt sich um eine besondere Eigenschaft, die von Natur aus unveränderlich ist und im Falle einer Wertübergabe vom Elternteil an das Kind verwendet wird. Requisiten sind nur ein Kommunikationskanal zwischen Komponenten, der sich immer von oben (übergeordnet) nach unten (untergeordnet) bewegt.
Im Folgenden finden Sie ein vollständiges Beispiel für die Kombination von Status und Requisiten: -
quelle
Im Allgemeinen ist der Status einer Komponente (übergeordnet) eine Stütze für die untergeordnete Komponente.
Requisiten sind im Allgemeinen unveränderlich.
Im obigen Code haben wir eine übergeordnete Klasse (Parent), deren Status der Name ist, der als Requisite an die untergeordnete Komponente (untergeordnete Klasse) übergeben wird, und die untergeordnete Komponente rendert ihn mit {this.props.name}
quelle
Sie haben einige Daten, die von Benutzern irgendwo in der Anwendung eingegeben werden.
Die Komponente, in die die Daten eingegeben werden, sollte diese Daten in ihrem Zustand haben, da sie während der Dateneingabe bearbeitet und geändert werden müssen
An einer anderen Stelle in der Anwendung sollten die Daten als Requisiten an alle anderen Komponenten weitergegeben werden
Also ja, die Requisiten ändern sich, aber sie werden an der 'Quelle' geändert und fließen dann einfach von dort nach unten. Requisiten sind also im Kontext der Komponente, die sie empfängt, unveränderlich .
Beispielsweise würde ein Referenzdatenbildschirm, auf dem Benutzer eine Liste von Lieferanten bearbeiten, diesen Status verwalten. Dies würde dann dazu führen, dass die aktualisierten Daten in ReferenceDataState gespeichert werden, das eine Ebene unter AppState liegen könnte, und diese Lieferantenliste dann als Requisiten übergeben wird an alle Komponenten, die es verwenden mussten.
quelle
In React speichern die Status die Daten sowie die Requisiten. Der Unterschied zu letzterem besteht darin, dass die gespeicherten Daten durch unterschiedliche Änderungen geändert werden können. Dies sind nichts weiter als Objekte, die in flachem JavaScript geschrieben sind. Sie können also Daten oder Codes enthalten und die Informationen darstellen, die Sie modellieren möchten. Wenn Sie weitere Informationen benötigen, wird empfohlen, diese Veröffentlichungen zu lesen. Verwendung des Status in Reaktion und Verwendung von Requisiten in Reaktion
quelle
quelle
Einige Unterschiede zwischen "Zustand" und "Requisiten" reagieren.
Reagiert auf Steuerelemente und rendert DOM basierend auf dem Status. Es gibt zwei Arten von Komponentenzuständen: Requisiten sind der Status, der zwischen Komponenten übertragen wird, und der Status ist der interne Status von Komponenten. Requisiten werden für die Datenübertragung von der übergeordneten Komponente zur untergeordneten Komponente verwendet. Die Komponenten haben auch einen eigenen Status innerhalb: Status, der nur innerhalb der Komponente geändert werden kann.
Im Allgemeinen kann der Status einer bestimmten Komponente die Requisiten der untergeordneten Komponente sein. Requisiten werden an untergeordnete Komponenten übergeben, was in der Rendering-Methode der übergeordneten Komponente angegeben ist
quelle
Requisiten
Requisiten werden verwendet, um Daten in der untergeordneten Komponente zu übergeben
Requisiten ändern einen Wert außerhalb einer Komponente (untergeordnete Komponente)
Zustand
Statusverwendung innerhalb einer Klassenkomponente
Status Ändern Sie einen Wert innerhalb einer Komponente
Wenn Sie die Seite rendern, rufen Sie setState auf, um das DOM zu aktualisieren (Seitenwert aktualisieren).
Der Staat spielt eine wichtige Rolle bei der Reaktion
quelle
Als Antwort auf die anfängliche Frage, ob Requisiten unveränderlich sind, sollen sie in Bezug auf die untergeordnete Komponente unveränderlich sein, sind jedoch im Elternteil veränderbar.
quelle
React Components verwenden den Status, um die internen Variablen zu LESEN / SCHREIBEN, die beispielsweise geändert / mutiert werden können:
React Requisiten sind spezielle Objekte, mit denen Programmierer Variablen und Methoden von der übergeordneten Komponente in die untergeordnete Komponente übertragen können.
Es ist so etwas wie ein Fenster und Türen des Hauses. Requisiten sind auch unveränderlich. Untergeordnete Komponenten können sie nicht ändern / aktualisieren.
Es gibt einige Methoden, die beim Abhören helfen, wenn Requisiten von der übergeordneten Komponente geändert werden.
quelle
Dies ist mein aktueller Standpunkt bezüglich der Erklärung zwischen Staat und Requisiten
Der Status entspricht Ihrer lokalen Variablen in Ihrer Komponente. Sie können den Wert von state mithilfe von set state ändern. Sie können dann beispielsweise den Statuswert an Ihre untergeordnete Komponente übergeben.
Requisiten ist der Wert, der sich genau in Ihrem Redux-Geschäft befindet. Er stammt tatsächlich aus dem Status, der vom Reduzierer stammt. Ihre Komponente sollte mit Redux verbunden sein, um den Wert von Requisiten zu erhalten. Sie können Ihren Requisitenwert auch an Ihre untergeordnete Komponente übergeben
quelle
Eine einfache Erklärung lautet: STATE ist der lokale Status der Komponente, z. B. color = "blue" oder animation = true usw. Verwenden Sie this.setState, um den Status der Komponente zu ändern. Mit PROPS kommunizieren Komponenten miteinander (senden Daten von Eltern zu Kindern) und machen Komponenten wiederverwendbar.
quelle
Der Status ist Ihre Daten, ist veränderlich, Sie können alles tun, was Sie brauchen, Requisiten sind schreibgeschützte Daten. Wenn Sie Requisiten übergeben, haben Sie bereits mit Ihren Daten gearbeitet und Sie benötigen die untergeordnete Komponente, um sie zu rendern, oder wenn Ihre Requisiten eine sind Funktion u nenne es, um eine Aufgabe auszuführen
quelle
Der Staat ist der Ursprung der Wahrheit, in dem Ihre Daten leben. Man kann sagen, der Staat manifestiert sich über Requisiten.
Durch die Bereitstellung von Requisiten für Komponenten bleibt Ihre Benutzeroberfläche mit Ihren Daten synchron. Eine Komponente ist eigentlich nur eine Funktion, die Markup zurückgibt.
Bei gleichen Requisiten (Daten, die angezeigt werden sollen) wird immer das gleiche Markup erzeugt .
Die Requisiten sind also wie die Pipelines, die die Daten vom Ursprung zu den Funktionskomponenten transportieren.
quelle
Requisiten: Stellt schreibgeschützte Daten dar, die unveränderlich sind und auf Attribute der übergeordneten Komponente verweisen.
Status: Stellt veränderbare Daten dar, die sich letztendlich auf das auswirken, was auf der Seite gerendert und von der Komponente selbst intern verwaltet wird, und die Überstunden häufig aufgrund von Benutzereingaben ändern.
quelle
Der Hauptunterschied besteht darin, dass der Status für eine Komponente privat ist und nur innerhalb dieser Komponente geändert werden kann, während Requisiten nur statische Werte und Schlüssel für die untergeordnete Komponente sind, die über die übergeordnete Komponente übergeben werden und innerhalb der untergeordneten Komponente nicht geändert werden können
quelle