Unterschied zwischen Reaktionszustand und Requisiten

In diesem Artikel React State vs Props werden wir die Hauptunterschiede zwischen zwei sehr wichtigen Reaktionskomponenten, State und Requisiten, herausfinden. Wir werden einige grundlegende Beispiele behandeln, um Unterschiede zwischen Zustand und Requisiten herauszufinden. Es wird auch Situationen geben, in denen Status oder Requisiten verwendet werden können.

Zustand: Der Zustand kann als eine Instanz der Reaktionskomponentenklasse betrachtet werden und wird hauptsächlich für die Kommunikation mit einer Komponente verwendet. Der Status einer Reaktion einer Komponente ist ein Objekt, das Informationen enthält, die sich im Laufe des Lebenszyklus einer Komponente ändern können oder nicht. Das Statusobjekt speichert Werte von Eigenschaften, die sich auf eine Komponente beziehen. Wenn sich die Eigenschaften einer Komponente ändern, ändert sich der mit dem Statusobjekt verknüpfte Wert und die Komponente wird neu gerendert. Dies bedeutet, dass sie sich durch die neuen Werte ändert. Hier ist ein Beispiel, das den Reaktionsstatus erklärt:

Code:

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

Ausgabe:

Nehmen wir nun an, wir möchten die Komponenteneigenschaften ändern. Um dies zu erreichen, gibt es eine Methode namens setState (). Beachten Sie, dass Sie immer die setState () -Methode verwenden sollten, um den Status einer Komponente zu ändern. Dadurch wird sichergestellt, dass die Komponente ihren Status erneut rendert.

Code:

class Car extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
);
)
changeColor = () => (
this.setState((color: "green"));
)
render() (
return (
My (this.state.Company)

class Car extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
);
)
changeColor = () => (
this.setState((color: "green"));
)
render() (
return (
My (this.state.Company)

class Car extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
);
)
changeColor = () => (
this.setState((color: "green"));
)
render() (
return (
My (this.state.Company)

Es ist eine (this.state.color)
(this.state.Modelnumber)
von (this.state.launch-year).


type = "button"
onClick = (this.changeColor)
> Fahrradfarbe ändern
);
)
)

Im obigen Code haben wir eine Schaltfläche zum Klicken hinzugefügt, auf die neue Änderungen an der Komponente gerendert werden. Der obige Code erzeugt die folgende Ausgabe beim Klicken auf die Schaltfläche.

Ausgabe:

Requisiten: Requisiten in ReactJs werden verwendet, um Daten an Komponenten zu senden. Requisiten entsprechen reinen Javascript-Funktionsparametern. Da reine Funktionsparameter nach ihrer Zuweisung nicht geändert werden können, können wir ihre Werte nicht ändern. Das folgende Beispiel zeigt, wie Requisiten verwendet werden:

Code:

class Bike extends React.Component (
render() (
return This is (this.props.Companyname)
)
)
const component = ;

class Bike extends React.Component (
render() (
return This is (this.props.Companyname)
)
)
const component = ;

class Bike extends React.Component (
render() (
return This is (this.props.Companyname)
)
)
const component = ;

Ausgabe:

Wenn die Komponente einen Konstruktor hat, sollte das Requisitenobjekt mit super an den Konstruktor übergeben werden. Hier ist ein Beispiel:

Code:

class Bike extends React.Component (
constructor(props) (
super(props);
)
render() (
return This is a Bike ;
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
)
render() (
return This is a Bike ;
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
)
render() (
return This is a Bike ;
)
)

Ausgabe:

Head to Head Vergleich zwischen React State und Props (Infografik)

Nachfolgend finden Sie die Top 4 Vergleiche zwischen React State und Props :

Hauptunterschiede zwischen Reaktionszustand und Requisiten

Lassen Sie uns einige der wichtigsten Unterschiede zwischen React State und Props diskutieren :

  1. Requisiten sind unveränderlich, dh ihr Inhalt kann nach dem Zuweisen nicht mehr geändert werden. Der Status ist jedoch ein Objekt, das zum Speichern von Daten verwendet wird, die sich in Zukunft ändern können. Außerdem steuert der Status das Verhalten der Komponente, nachdem die Änderung vorgenommen wurde.
  2. Sowohl Requisiten als auch Zustände werden zum Speichern von Daten verwendet, die sich auf eine Komponente beziehen.
  3. Zustände können nur in Klassenkomponenten verwendet werden, wohingegen Requisiten keine solche Einschränkung haben.
  4. Requisiten werden im Allgemeinen von der übergeordneten Komponente festgelegt, während der Status von Ereignishandlern gesteuert wird, dh, sie werden von der Komponente selbst verwaltet.
  5. State ist für eine Komponente lokal und kann nicht in anderen Komponenten verwendet werden, wohingegen Props es untergeordneten Komponenten ermöglichen, Werte von übergeordneten Komponenten zu lesen.

Vergleichstabelle von React State vs Props

Die folgende Tabelle fasst die Vergleiche zwischen React State und Props zusammen :

Zustand reagieren Requisiten
Der Reaktionszustand ist veränderlich und der Wert kann je nach Anforderung geändert werden.Requisiten sind unveränderlich, dh ihr Inhalt kann nicht mehr geändert werden, sobald sie zugewiesen wurden.
Zustände können nur von Klassenkomponenten verwendet werden.Requisiten können sowohl von der Klasse als auch von anderen Komponenten verwendet werden.
Wird von der übergeordneten Komponente festgelegt.Wird von Ereignishandlern festgelegt, dh, sie werden vollständig von der Komponente selbst verwaltet.
Der Status ist für eine Komponente lokal und kann nicht in anderen Komponenten verwendet werden.Mit Requisiten können untergeordnete Komponenten Werte von übergeordneten Komponenten lesen.

Fazit

Nachdem wir die Eigenschaften sowohl des Status als auch der Requisiten behandelt haben, sind wir zu dem Schluss gekommen, dass wir den Status bevorzugen sollten, wenn die Möglichkeit besteht, dass sich die Eigenschaften in Bezug auf eine Komponente ändern, da er das erneute Rendern von Eigenschaften ermöglicht. Mit Requisiten können untergeordnete Komponenten auf Methoden zugreifen, die in übergeordneten Komponenten definiert sind. Dadurch wird die Notwendigkeit minimiert, dass untergeordnete Komponenten ihren Status haben. Requisiten sind in untergeordneten Komponenten schreibgeschützt. Es ist erwähnenswert, dass Status und Requisiten sehr wichtige Komponenten der Reaktionsarchitektur sind.

Empfohlene Artikel

Dies ist eine Anleitung zu React State vs Props. Hier werden auch die Hauptunterschiede zwischen React State und Props mit Infografiken und die Vergleichstabelle besprochen. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. Fragen in Vorstellungsgesprächen bei GitHub
  2. Top Unterschiede - Jira vs Github
  3. Fragen in Vorstellungsgesprächen bei Top 19 ReactJs
  4. Die 10 häufigsten Anwendungen von React JS
  5. Top 11 Tools of React mit ihren Funktionen

Kategorie:

Software-Entwicklung