Különbség a reagált állapot és a kellékek között

Ebben a cikkben a React State vs Props közzétesszük a két nagyon fontos reakciókomponens, az állapot és a kellékek közötti fő különbségeket. Fedezzünk fel néhány alapvető példát, hogy kitaláljuk a különbségeket az állam és a kellékek között. Emellett olyan helyzeteket fogunk látni, ahol az állapot vagy a kellékek felhasználhatók.

Állapot: Az állapot úgy tekinthető, mint a reagált komponens osztálya, és főként az összetevővel történő kommunikációra szolgál. A reagált komponens állapota olyan objektum, amely olyan információkat tartalmaz, amelyek változhatnak vagy nem változhatnak az alkatrész életciklusa során. Az állami objektum az összetevőhöz tartozó tulajdonságok értékeit tárolja. Amikor megváltozik az összetevő tulajdonságai, az állapotobjektumhoz tartozó érték megváltozik, és az összetevő újra megjelenik, azaz az új értékekkel megváltozik. Íme egy példa, amely elmagyarázza a reagálási állapotot:

Kód:

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

);
)
)

Kimenet:

Most mérlegeljük, hogy meg akarjuk változtatni az alkatrészek tulajdonságait. Ennek eléréséhez létezik egy setState () nevű módszer. Vegye figyelembe, hogy mindig a setState () metódust kell használnia az összetevő állapotának megváltoztatására, ez ellenőrzi, hogy az összetevő újra megjeleníti-e az állapotát.

Kód:

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)

Ez egy (this.state.color)
(This.state.Modelnumber)
a (z) (this.state.launch-year) -tól.


type = "button"
onClick = (this.changeColor)
> Változtassa meg a kerékpár színét
);
)
)

A fenti kódhoz kattintással adtunk hozzá egy gombot, amelyen az új változtatások végrehajtásra kerülnek az összetevőn. A fenti kód a következő kimenetet fogja eredményezni a gomb kattintáskor.

Kimenet:

Támaszok: A ReactJ-kben található kellékeket az elemek küldésére használják. A kellékek megegyeznek a javascript tiszta funkcióparamétereivel. Mivel a tiszta funkcióparamétereket nem lehet megváltoztatni, miután kiosztották, nem változtathatjuk meg azok értékét. Az alábbi példa bemutatja a kellékek használatát:

Kód:

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

Kimenet:

Ha az összetevő konstruktorral rendelkezik, akkor a rekvízió objektumot a super segítségével kell átadni a konstruktornak. Íme egy példa:

Kód:

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

Kimenet:

Összehasonlítás a fej és a fej között a reagált állapot és a kellékek között (infographics)

Az alábbiakban bemutatjuk a négy legjobb összehasonlítást a React State vs Props között :

Főbb különbségek a reagált állapot és a kellékek között

Beszéljünk néhány, a React State vs Props közötti főbb különbségről :

  1. A kellékek változatlanok, vagyis azok tartalma nem változtatható meg egyszer, de az state olyan objektum, amelyet olyan adatok tárolására használnak, amelyek a jövőben megváltozhatnak, az state szintén ellenőrzi az összetevő viselkedését a módosítás elvégzése után.
  2. A kellékeket és az állapotokat egy komponenshez kapcsolódó adatok tárolására is használják.
  3. Az államok csak az osztály alkotóelemeiben használhatók, míg a kellékek nem rendelkeznek ilyen korlátozással.
  4. A kellékeket általában a szülő összetevő állítja be, míg az állapotot eseménykezelők szabályozzák, azaz őket az összetevő kezeli.
  5. Az állapot lokális egy komponensre, és nem használható más komponensekben, míg a kellékek lehetővé teszik a gyermekkomponenseknek, hogy az értékeket kiolvassák a szülő elemekből.

A reagált állapot és a kellékek összehasonlító táblázata

Az alábbi táblázat összefoglalja a React State vs Props összehasonlításait :

Reaktív állapot kellékek
A React állapot változtatható, és értéke követelmény szerint megváltoztatható.A kellékek változatlanok, vagyis tartalmuk nem változtatható meg, ha kiosztásra kerülnek.
Az állapotokat csak az osztály alkotóelemei használhatják.A kellékek osztályonként és más alkatrészeknél is felhasználhatók.
A szülő összetevő állítja be.Az eseménykezelők állítják be, azaz teljesen az alkatrész kezeli őket.
Az állapot lokális egy komponensre, és nem használható más komponensekben.A kellékek lehetővé teszik, hogy a gyermekkomponensek kiolvassák az értékeket a szülőkomponensekből.

Következtetés

Miután lefedtük mind az állapot, mind a kellékek tulajdonságait, arra a következtetésre jutottunk, hogy amikor fennáll a lehetőség egy komponens tulajdonságainak megváltoztatására, akkor inkább az állapotot kell részesíteni, mivel ez lehetővé teszi a tulajdonságok újraleképezését. A kellékek viszont lehetővé teszik a gyermekkomponensek számára a szülőkomponensekben meghatározott módszerek elérését, ez minimalizálja a gyermekkomponensek állapotának szükségességét. A kellékek csak olvasható komponensek. Érdemes megjegyezni, hogy az állapot és a kellékek a reakció architektúra nagyon fontos elemei.

Ajánlott cikkek

Ez egy útmutató a React State vs Props-hez. Itt is megvitatjuk a React State vs Props kulcsfontosságú különbségeket az infographics és az összehasonlító táblázat segítségével. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -

  1. GitHub interjúkérdések
  2. Legfontosabb különbségek - Jira vs Github
  3. A 19 legfontosabb ReactJ interjúkérdés
  4. A React JS 10 legfontosabb felhasználási területe
  5. A 11 legjobban reagáló eszköz azok jellemzőivel

Kategória:

Szoftverfejlesztés