Forskellen mellem React State vs Props

I denne artikel React State vs Props vil vi finde ud af store forskelle mellem to meget vigtige reaktionskomponenter, tilstand og rekvisitter. Vi vil dække nogle grundlæggende eksempler for at finde ud af forskelle mellem både stat og rekvisitter. Vi vil også se situationer, hvor stat eller rekvisitter kan bruges.

Tilstand: Tilstand kan betragtes som et eksempel på reaktionskomponentklasse og bruges hovedsageligt til kommunikation med en komponent. Tilstanden for en reaktion af en komponent er et objekt, der indeholder information, der muligvis eller ikke kan ændres i løbet af en komponents livscyklus. Tilstandsobjekt gemmer værdier for egenskaber relateret til en komponent. Hver gang der er en ændring i egenskaber, der er relateret til en komponent, ændres værdien, der er knyttet til tilstandsobjekt, og komponenten gendanner sig selv igen, hvilket betyder, at den ændrer sig selv ved de nye værdier. Her er et eksempel, der forklarer reaktionstilstand:

Kode:

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

);
)
)

Produktion:

Lad os nu overveje, at vi ønsker at ændre komponentegenskaber. For at opnå dette findes der en metode kaldet setState (). Bemærk, at du altid skal bruge metoden setState () til at ændre tilstanden for en komponent, den vil sikre, at komponenten gendanner sin tilstand igen.

Kode:

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)

Det er en (this.state.color)
(This.state.Modelnumber)
fra (this.state.launch-year).


type = "knappen"
onClick = (this.changeColor)
> Skift cykelfarve
);
)
)

I ovenstående kode har vi tilføjet en knap ved at klikke på, hvilke nye ændringer der vil blive gengivet på komponenten. Ovenstående kode giver følgende output på knapklikken.

Produktion:

Props: Props i ReactJs bruges til at sende data til komponenter. Props svarer til javascript-rene funktionsparametre. Da rene funktionsparametre ikke kan ændres, når de er tildelt, kan vi ikke ændre deres værdier. Nedenstående eksempel viser, hvordan rekvisitter bruges:

Kode:

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

Produktion:

Hvis komponenten har en konstruktør, skal rekvisitter objekt være nødvendigt overført til konstruktøren ved hjælp af super. Her er et eksempel:

Kode:

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

Produktion:

Sammenligning mellem hoved og hoved mellem React State vs Props (Infographics)

Nedenfor er de Top 4 sammenligninger mellem React State vs Props :

Vigtige forskelle mellem React State vs Props

Lad os diskutere nogle af de største centrale forskelle mellem React State vs Props :

  1. Rekvisitter er uforanderlige, det vil sige, at deres indhold ikke kan ændres, når den er tildelt, men tilstand er et objekt, der bruges til at opbevare data, der kan ændres i fremtiden, også staten kontrollerer komponentens opførsel, efter at ændringen er foretaget.
  2. Både rekvisitter og tilstande bruges til at gemme data relateret til en komponent.
  3. Stater kan kun bruges i klasse komponenter, mens rekvisitter ikke har en sådan begrænsning.
  4. Rekvisitter er normalt indstillet af overordnede komponenter, mens staten styres af begivenhedshåndterere, dvs. at de styres af selve komponenten.
  5. Tilstand er lokal for en komponent og kan ikke bruges i andre komponenter, mens Props tillader underordnede komponenter at læse værdier fra overordnede komponenter.

Sammenligningstabel over reaktionsstatus kontra rekvisitter

Tabellen nedenfor opsummerer sammenligningerne mellem React State vs Props :

React State Rekvisitter
React State er mutable, og dens værdi kan ændres efter krav.Rekvisitter er uforanderlige, det vil sige deres indhold kan ikke ændres, når de er tildelt.
Stater kan kun bruges af klassekomponenter.Rekvisitter kan bruges af klasse såvel som andre komponenter.
Indstillet af den overordnede komponent.Indstillet af begivenhedshåndterere, det vil sige, at de administreres fuldstændigt af selve komponenten.
Tilstand er lokal for en komponent og kan ikke bruges i andre komponenter.Props gør det muligt for underordnede komponenter at læse værdier fra overordnede komponenter.

Konklusion

Efter at have dækket funktioner i både tilstand og rekvisitter, har vi konkluderet, at når der findes en mulighed for ejendomsændringer relateret til en komponent, så skal vi foretrække tilstand, da det muliggør gengivelse af egenskaber. Props tillader på den anden side underordnede komponenter adgang til metoder, der er defineret i forældrekomponenter, dette minimerer behovet for, at underordnede komponenter har deres tilstand. Props er skrivebeskyttet i underordnede komponenter. Det er værd at bemærke, at tilstand og rekvisitter er meget vigtige komponenter i reaktionsarkitekturen.

Anbefalede artikler

Dette er en guide til React State vs Props. Her diskuterer vi også de vigtigste forskelle i React State vs Props med infografik og sammenligningstabel. Du kan også se på de følgende artikler for at lære mere -

  1. GitHub-interviewspørgsmål
  2. Topforskelle - Jira vs Github
  3. Top 19 ReactJs Interview spørgsmål
  4. Top 10 anvendelser af React JS
  5. Top 11 værktøjer til reaktion med deres funktioner

Kategori:

Softwareudvikling