Erinevus reageerimisseisundi ja rekvisiitide vahel

Selles artiklis React State vs Props selgitame välja peamised erinevused kahe väga olulise reageerimiskomponendi, oleku ja rekvisiitide vahel. Katame mõned põhinäited, et selgitada välja erinevused nii osariigi kui rekvisiidi vahel. Samuti näeme olukordi, kus saab kasutada osariiki või rekvisiite.

Olek: olekut võib pidada reageeriva komponendi klassi näiteks ja seda kasutatakse peamiselt komponendiga suhtlemiseks. Reaktiivse komponendi olek on objekt, mis sisaldab teavet, mis võib või ei pruugi komponendi olelustsükli jooksul muutuda. Riigiobjekt salvestab komponendiga seotud omaduste väärtused. Kui komponendiga seotud atribuudid muutuvad, muutub olekiobjektiga seotud väärtus ja komponent renderdab end, mis tähendab, et see muudab ennast uute väärtuste abil. Siin on näide, mis selgitab reageerimise olekut:

Kood:

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

);
)
)

Väljund:

Mõelgem nüüd, et tahame muuta komponentide omadusi. Selle saavutamiseks on olemas meetod nimega setState (). Pange tähele, et komponendi oleku muutmiseks peaksite alati kasutama meetodit setState (). See tagab, et komponent renderdab oma oleku uuesti.

Kood:

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)

See on (this.state.color)
(this.state.Modelnumber)
alates (this.state.launch-year).


tüüp = "nupp"
onClick = (this.changeColor)
> Muuda jalgratta värvi
);
)
)

Ülaltoodud koodi oleme lisanud nupule klõpsamise nupule, millele komponendis tehakse uued muudatused. Ülaltoodud kood annab nupule klõpsamisel järgmise väljundi.

Väljund:

Rekvisiidid: ReactJ-i rekvisiite kasutatakse komponentide andmete saatmiseks. Rekvisiidid on samaväärsed javascripti puhaste funktsioonide parameetritega. Kuna puhaste funktsioonide parameetreid ei saa pärast omistamist muuta, ei saa me nende väärtusi muuta. Allpool toodud näide näitab rekvisiitide kasutamist:

Kood:

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

Väljund:

Kui komponendil on konstruktor, tuleks rekvisiidiobjekt edastada konstruktorile, kasutades super. Siin on näide:

Kood:

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

Väljund:

React State'i ja rekvisiitide võrdlus (infograafika)

Allpool on toodud 4 parimat võrdlust React State vs Props vahel :

Peamised erinevused reaalajas oleku ja rekvisiitide vahel

Arutleme mõne peamise peamise erinevuse vahel React State vs Props vahel :

  1. Rekvisiidid on muutumatud, st nende sisu ei saa pärast määramist muuta, kuid olek on objekt, mida kasutatakse andmete muutmiseks, mis võivad tulevikus muutuda. Samuti kontrollib olek komponendi käitumist pärast muudatuse tegemist.
  2. Komponendiga seotud andmete salvestamiseks kasutatakse nii rekvisiite kui ka olekuid.
  3. Osariike saab kasutada ainult klassikomponentide osas, rekvisiitidel seda piirangut pole.
  4. Rekvisiidid seab tavaliselt lähtekomponent, samas kui olekut reguleerivad sündmuste käitlejad, st neid haldab komponent ise.
  5. Olek on komponendi suhtes lokaalne ja seda ei saa teistes komponentides kasutada, samas kui rekvisiidid võimaldavad lastekomponentidel lugeda väärtusi vanemate komponentide põhjal.

Reaktiivse oleku ja rekvisiitide võrdlustabel

Allolevas tabelis on esitatud kokkuvõte React State vs Props võrdlustest :

Reageeri olek Rekvisiidid
Reaktsiooni olek on muutuv ja selle väärtust saab vastavalt nõudele muuta.Rekvisiidid on muutumatud, see tähendab, et nende sisu ei saa pärast määramist muuta.
Olekusid saavad kasutada ainult klassi komponendid.Rekvisiite saab kasutada klasside kaupa, aga ka muid komponente.
Määratakse vanema komponendi järgi.Ürituste käitlejad määravad, et komponendid ise haldavad neid täielikult.
Olek on komponendi suhtes lokaalne ja seda ei saa teistes komponentides kasutada.Rekvisiidid võimaldavad lastekomponentidel lugeda väärtusi vanemate komponentide põhjal.

Järeldus

Pärast nii oleku kui rekvisiitide omaduste katmist oleme jõudnud järeldusele, et kui on olemas võimalus komponendiga seotud omaduste muutmiseks, peaksime eelistama olekut, kuna see võimaldab omadusi uuesti renderdada. Seevastu rekvisiidid võimaldavad lastekomponentidel juurdepääsu meetoditele, mis on määratletud vanemates komponentides, see vähendab alamkomponentide vajadust oma oleku järele. Lastekomponentide rekvisiidid on kirjutuskaitstud. Väärib märkimist, et olek ja rekvisiidid on reageerimise arhitektuuri väga olulised komponendid.

Soovitatavad artiklid

See on juhend React State vs Props kohta. Siin käsitleme ka peamisi erinevusi infotehnoloogiaga React State vs Props ja võrdlustabelit. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -

  1. GitHubi intervjuu küsimused
  2. Suurimad erinevused - Jira vs Github
  3. 19 parimat ReactJi intervjuuküsimust
  4. React JS 10 parimat kasutusala
  5. 11 parimat tööriista nende omadustega reageerimiseks

Kategooria:

Tarkvaraarendus