Ero reagointitilan ja rekvisiittien välillä

Tässä artikkelissa React State vs Props selvitetään suuret erot kahden erittäin tärkeän reaktiokomponentin, tilan ja rekvisiittien välillä. Aiomme kattaa joitain perus esimerkkejä selvittää eroja sekä valtion että rekvisiitta. Näemme myös tilanteita, joissa tilaa tai rekvisiitta voidaan käyttää.

Tila: Tilaa voidaan pitää reaktiokomponenttiluokan esimerkinä ja sitä käytetään pääasiassa kommunikointiin komponentin kanssa. Reagoivan komponentin tila on esine, joka sisältää tietoa, joka voi muuttua tai muuttua komponentin elinkaaren aikana. Tilaobjekti tallentaa komponenttiin liittyvien ominaisuuksien arvot. Aina kun komponenttiin liittyvissä ominaisuuksissa tapahtuu muutoksia, tilaobjektiin liittyvä arvo muuttuu ja komponentti renderoituu uudelleen, mikä tarkoittaa, että se muuttaa itsensä uusilla arvoilla. Tässä on esimerkki, joka selittää reagointitilan:

Koodi:

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

);
)
)

lähtö:

Tarkastellaan nyt haluamme muuttaa komponenttien ominaisuuksia. Tämän saavuttamiseksi on olemassa menetelmä nimeltä setState (). Huomaa, että sinun tulisi aina käyttää setState () -menetelmää komponentin tilan muuttamiseen, se varmistaa, että komponentti renderoi tilansa uudelleen.

Koodi:

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)

Se on (this.state.color)
(This.state.Modelnumber)
vuodesta (this.state.launch-year).


type = "painiketta"
onClick = (this.changeColor)
> Vaihda pyörän väri
);
)
)

Yllä olevaan koodiin olemme lisänneet napsautuksen painikkeen, johon komponenttiin tehdään uusia muutoksia. Yllä oleva koodi tuottaa seuraavan tuloksen painikkeen napsautuksessa.

lähtö:

Rekvisiitta: ReactJ : n rekvisiitta käytetään tietojen lähettämiseen komponentteihin. Rekvisiitta vastaa JavaScriptin puhtaita funktioparametreja. Koska puhtaita funktioparametreja ei voida muuttaa, kun ne on määritetty, emme voi muuttaa niiden arvoja. Seuraava esimerkki osoittaa, kuinka rekvisiitta käytetään:

Koodi:

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

lähtö:

Jos komponentilla on konstruktori, rekvisiittaobjekti on välttämätöntä siirtää rakentajalle käyttämällä super. Tässä on esimerkki:

Koodi:

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

lähtö:

Head to Head -vertailu React State vs Props (Infographics)

Alla on 4 suosituinta vertailua React State vs Props :

Tärkeimmät erot reagointitilan ja rekvisiittien välillä

Keskustelemme joistakin React State vs Props -yritysten tärkeimmistä eroista :

  1. Rekvisiittit ovat muuttumattomia, eli niiden sisältöä ei voida muuttaa, kun ne on määritetty, mutta tila on esine, jota käytetään pitämään dataa, joka voi muuttua tulevaisuudessa. Tila myös hallitsee komponentin käyttäytymistä muutoksen jälkeen.
  2. Sekä rekvisiitteja että tiloja käytetään komponenttiin liittyvän tiedon tallentamiseen.
  3. Tiloja voidaan käyttää vain luokan komponenteissa, kun taas rekvisiiteillä ei ole tällaista rajoitusta.
  4. Tarjoukset asetetaan yleensä vanhemmalla komponentilla, kun taas tilaa säätelevät tapahtumakäsittelijät, eli niitä itse komponentti hallitsee.
  5. Tila on paikallinen komponentille, eikä sitä voida käyttää muissa komponenteissa, kun taas rekvisiittien avulla lasten komponentit voivat lukea arvoja vanhemmista komponenteista.

Vertailutaulukko reagointitilasta vs. rekvisiitta

Seuraavassa taulukossa on yhteenveto vertailusta React State vs Props :

Reagoi valtio Rekvisiitta
React State on muuttuva ja sen arvoa voidaan muuttaa vaatimuksen mukaan.Rekvisiitta on muuttumaton, ts. Niiden sisältöä ei voi muuttaa, kun se on määritetty.
Vain luokkakomponentit voivat käyttää tiloja.Rekvisiittaa voidaan käyttää luokittain samoin kuin muita komponentteja.
Asettaa emokomponentti.Tapahtumakäsittelijät asettavat, että komponentti itse hallitsee niitä kokonaan.
Tila on komponentissa paikallinen eikä sitä voida käyttää muissa komponenteissa.Rekvisiittien avulla lasten komponentit voivat lukea arvoja vanhemmista komponenteista.

johtopäätös

Kun olemme peittäneet sekä tilan että rekvisiittien piirteet, olemme päättäneet, että aina kun komponenttiin liittyviä ominaisuusmuutoksia on mahdollista, meidän tulisi suosia tilaa, koska se mahdollistaa ominaisuuksien uudelleen renderoinnin. Rekvisiitta toisaalta sallii lastekomponenttien pääsyn vanhemmissa komponenteissa määriteltyihin menetelmiin, tämä minimoi lastekomponenttien tarpeen saada tila. Rekvisiitta on vain luku -komponentti. On syytä huomata, että tila ja rekvisiitta ovat erittäin tärkeitä komponentteja reagointiarkkitehtuurissa.

Suositellut artikkelit

Tämä on opas reagoida tilaan vs rekvisiitta. Tässä keskustellaan myös React State vs Props -erotietojen ja vertailutaulukon tärkeimmistä eroista. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

  1. GitHub -haastattelukysymykset
  2. Suurimmat erot - Jira vs Github
  3. 19 ReactJ: n haastattelukysymystä
  4. React JS: n 10 suosituinta käyttöä
  5. Reagoi 11 tärkeintä työkalua niiden ominaisuuksien kanssa

Luokka:

Ohjelmistokehitys