Rozdíl mezi reakčním státem a rekvizitami

V tomto článku React State vs Props si ukážeme hlavní rozdíly mezi dvěma velmi důležitými reakčními složkami, stavem a rekvizitami. Pokryjeme některé základní příklady, abychom zjistili rozdíly mezi stavem a rekvizitami. Uvidíme také situace, kdy lze použít stav nebo rekvizity.

Stav: Stav lze považovat za příklad třídy reakčních složek a používá se hlavně pro komunikaci s komponentou. Stav reakce komponenty je objekt, který obsahuje informace, které se mohou nebo nemusí během životního cyklu komponenty změnit. Stavový objekt ukládá hodnoty vlastností souvisejících s komponentou. Kdykoli dojde ke změně vlastností souvisejících s komponentou, změní se hodnota spojená se stavovým objektem a komponenta se znovu vykreslí, což znamená, že se změní o nové hodnoty. Zde je příklad, který vysvětlí stav reakce:

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

);
)
)

Výstup:

Nyní uvažme, že chceme změnit vlastnosti komponenty. K dosažení tohoto cíle existuje metoda zvaná setState (). Mějte na paměti, že byste měli vždy použít metodu setState () ke změně stavu komponenty, ujistíte se, že součást znovu vykreslí svůj stav.

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)

Jedná se o (this.state.color)
(this.state.Modelnumber)
od (this.state.launch-year).


type = "button"
onClick = (this.changeColor)
> Změnit barvu kola
);
)
)

Ve výše uvedeném kódu jsme přidali tlačítko po kliknutí na to, které nové změny budou provedeny na komponentě. Výše uvedený kód vytvoří po kliknutí na tlačítko následující výstup.

Výstup:

Rekvizity: Rekvizity v ReactJs se používají k odesílání dat do komponent. Rekvizity jsou ekvivalentní s čistě funkčními parametry javascript. Protože čistě funkční parametry nelze po přiřazení změnit, nemůžeme změnit jejich hodnoty. Níže uvedený příklad ukazuje, jak jsou použity rekvizity:

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

Výstup:

Pokud má komponenta konstruktor, měl by být objekt rekvizity předán konstruktoru pomocí super. Zde je příklad:

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

Výstup:

Srovnání hlava-hlava mezi reakčním stavem a rekvizity (infografika)

Níže jsou uvedena top 4 srovnání mezi React State vs Props :

Klíčové rozdíly mezi reakčním státem a rekvizitami

Pojďme diskutovat o některých hlavních klíčových rozdílech mezi React State vs Props :

  1. Rekvizity jsou neměnné, což znamená, že jejich obsah nelze po přiřazení změnit, ale stav je objekt, který se používá k uchovávání dat, která se mohou v budoucnu změnit. Také stav řídí chování komponenty po provedení změny.
  2. Propy i stavy se používají pro ukládání dat souvisejících s komponentou.
  3. Státy mohou být použity pouze ve složkách třídy, zatímco rekvizity takové omezení nemají.
  4. Reklamy jsou obvykle nastaveny nadřazenou komponentou, zatímco stav je řízen obsluhou událostí, která je řízena samotnou komponentou.
  5. Stav je místní pro komponentu a nelze ji použít v jiných komponentách, zatímco Props umožňuje podřízeným komponentám číst hodnoty z nadřazených komponent.

Srovnávací tabulka stavu reakcí versus rekvizity

Níže uvedená tabulka shrnuje srovnání mezi React State a Props :

Reagovat stát Rekvizity
Stav reakce je proměnlivý a jeho hodnota může být změněna podle požadavku.Rekvizity jsou neměnné, to znamená, že jejich obsah nelze po přiřazení změnit.
Státy mohou používat pouze komponenty třídy.Rekvizity mohou být použity jak ve třídě, tak i v jiných komponentách.
Nastavuje nadřazená součást.Obslužné programy událostí nastavují, že jsou zcela spravovány samotnou komponentou.
Stav je místní součást a nelze ji použít v jiných součástech.Rekvizity umožňují podřízeným komponentám číst hodnoty z nadřazených komponent.

Závěr

Po pokrytí vlastností jak stavu, tak rekvizit, jsme dospěli k závěru, že kdykoli existuje možnost změn vlastností souvisejících s komponentou, měli bychom dávat přednost stavu, protože to umožňuje opětovné vykreslení vlastností. Na druhé straně rekvizity umožňují podřízeným komponentám přístup k metodám, které jsou definovány v nadřazených komponentách, což minimalizuje potřebu jejich podřízených komponent. Rekvizity jsou v podřízených komponentách pouze pro čtení. Stojí za zmínku, že stát a rekvizity jsou velmi důležitými součástmi architektury reakcí.

Doporučené články

Toto je průvodce React State vs Props. Zde také diskutujeme klíčové rozdíly React State vs Props s infografikou a srovnávací tabulkou. Další informace naleznete také v následujících článcích -

  1. GitHub Interview Otázky
  2. Nejlepší rozdíly - Jira vs Github
  3. Top 19 reakčních otázek ReactJs
  4. Top 10 použití React JS
  5. 11 hlavních nástrojů reakce s jejich funkcemi

Kategorie:

Vývoj softwaru