Verschil tussen React State versus Props

In dit artikel React State vs Props, zullen we grote verschillen tussen twee zeer belangrijke reactiecomponenten, state en props, uitzoeken. We zullen enkele basisvoorbeelden behandelen om verschillen tussen zowel staat als rekwisieten te achterhalen. We zullen ook situaties zien waarin staat of rekwisieten kunnen worden gebruikt.

Staat: staat kan worden beschouwd als een instantie van de klasse van de reactcomponenten en wordt voornamelijk gebruikt voor communicatie met een component. De status van een reactie op een component is een object dat informatie bevat die al dan niet verandert tijdens de levenscyclus van een component. Statusobject slaat waarden op van eigenschappen die betrekking hebben op een component. Wanneer er een wijziging in eigenschappen met betrekking tot een component is, verandert de waarde die aan het statusobject is gekoppeld en wordt de component opnieuw gerenderd, wat betekent dat deze zichzelf door de nieuwe waarden wijzigt. Hier is een voorbeeld dat de reactiestatus zal verklaren:

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).

);
)
)

Output:

Laten we nu overwegen dat we de eigenschappen van de componenten willen veranderen. Om dit te bereiken, bestaat er een methode genaamd setState (). Merk op dat u altijd de methode setState () moet gebruiken om de status van een component te wijzigen, deze zorgt ervoor dat de component de status opnieuw wordt weergegeven.

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)

Het is een (this.state.color)
() This.state.Modelnumber
uit (this.state.launch-jaar).


type = "button"
onClick = () this.changeColor
> Wijzig fietskleur
);
)
)

In de bovenstaande code hebben we een klikknop toegevoegd waarop nieuwe wijzigingen in het onderdeel worden weergegeven. De bovenstaande code produceert de volgende uitvoer bij het klikken op de knop.

Output:

Props: Props in ReactJs worden gebruikt om gegevens naar componenten te verzenden. Props zijn gelijk aan pure functieparameters van JavaScript. Aangezien pure functieparameters niet kunnen worden gewijzigd nadat ze zijn toegewezen, kunnen we hun waarden niet wijzigen. Het onderstaande voorbeeld laat zien hoe rekwisieten worden gebruikt:

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 = ;

Output:

Als de component een constructor heeft, moet het props-object met behulp van super aan de constructor worden doorgegeven. Hier is een voorbeeld:

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 ;
)
)

Output:

Head to Head-vergelijking tussen Reactiestatus versus rekwisieten (infographics)

Hieronder staan ​​de Top 4-vergelijkingen tussen React State vs Props :

Belangrijkste verschillen tussen React State versus Props

Laten we enkele van de belangrijkste belangrijkste verschillen tussen React State versus Props bespreken :

  1. Rekwisieten zijn onveranderlijk, dat wil zeggen dat hun inhoud niet kan worden gewijzigd nadat ze zijn toegewezen, maar status is een object dat wordt gebruikt om gegevens vast te houden die in de toekomst kunnen veranderen, ook status bepaalt het gedrag van de component nadat de wijziging is aangebracht.
  2. Zowel rekwisieten als statussen worden gebruikt voor het opslaan van gegevens met betrekking tot een component.
  3. Staten kunnen alleen worden gebruikt in Klasse-componenten, terwijl rekwisieten geen dergelijke beperking hebben.
  4. Props worden over het algemeen ingesteld door de bovenliggende component, terwijl de status wordt bepaald door event-handlers, dat wil zeggen dat ze worden beheerd door de component zelf.
  5. Status is lokaal voor een component en kan niet worden gebruikt in andere componenten, terwijl Props onderliggende componenten toestaat om waarden uit bovenliggende componenten te lezen.

Vergelijkingstabel van reactietoestand versus rekwisieten

De onderstaande tabel vat de vergelijkingen tussen React State versus Props samen :

Reactiestaat Rekwisieten
Reactstatus is veranderlijk en de waarde ervan kan per eis worden gewijzigd.Rekwisieten zijn onveranderlijk, dat wil zeggen dat hun inhoud niet kan worden gewijzigd nadat ze zijn toegewezen.
Statussen kunnen alleen worden gebruikt door klassecomponenten.Props kunnen zowel per klasse als voor andere componenten worden gebruikt.
Ingesteld door de bovenliggende component.Ingesteld door event handlers dat is dat ze volledig worden beheerd door de component zelf.
Status is lokaal voor een component en kan niet worden gebruikt in andere componenten.Met rekwisieten kunnen onderliggende componenten waarden uit bovenliggende componenten lezen.

Conclusie

Na het behandelen van kenmerken van zowel de staat als de rekwisieten, hebben we geconcludeerd dat wanneer er een mogelijkheid bestaat van eigenschapsveranderingen met betrekking tot een component, we de voorkeur moeten geven aan de staat, omdat deze de weergave van eigenschappen mogelijk maakt. Props daarentegen biedt onderliggende componenten toegang tot methoden die zijn gedefinieerd in bovenliggende componenten, dit minimaliseert de behoefte in onderliggende componenten om hun status te hebben. Props zijn alleen-lezen in onderliggende componenten. Het is vermeldenswaard dat staat en rekwisieten zeer belangrijke componenten zijn van reactarchitectuur.

Aanbevolen artikelen

Dit is een gids voor React State vs Props. Hier bespreken we ook de belangrijkste verschillen in React State vs Props met infographics en vergelijkingstabel. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. Vragen tijdens solliciteren bij GitHub
  2. Topverschillen - Jira vs Github
  3. Top 19 ReactJs sollicitatievragen
  4. Top 10 gebruik van React JS
  5. Top 11 tools van React met hun functies

Categorie:

Software ontwikkeling