Skillnaden mellan React State vs Props

I den här artikeln React State vs Props kommer vi att räkna ut stora skillnader mellan två mycket viktiga reaktionskomponenter, tillstånd och rekvisita. Vi kommer att täcka några grundläggande exempel för att räkna ut skillnader mellan både stat och rekvisita. Vi kommer också att se situationer där tillstånd eller rekvisita kan användas.

Tillstånd: Tillstånd kan betraktas som ett exempel på reaktionskomponentklass och används huvudsakligen för att kommunicera med en komponent. Tillståndet för att reagera en komponent är ett objekt som innehåller information som kanske eller inte kan ändras under en komponents livscykel. Statligt objekt lagrar värden på egenskaper relaterade till en komponent. Varje gång det sker en förändring i egenskaper relaterade till en komponent, kommer värdet som är associerat med tillståndsobjekt att ändras och komponenten kommer att återge sig själv vilket innebär att den kommer att ändra sig själv med de nya värdena. Här är ett exempel som förklarar reaktionstillstånd:

Koda:

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:

Låt oss nu överväga att vi vill ändra komponentegenskaper. För att uppnå detta finns det en metod som heter setState (). Observera att du alltid ska använda metoden setState () för att ändra tillståndet för en komponent, det kommer att se till att komponenten återger sitt tillstånd.

Koda:

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 är en (this.state.color)
(This.state.Modelnumber)
från (this.state.launch-year).


type = "button"
onClick = (this.changeColor)
> Ändra cykelfärg
);
)
)

I ovanstående kod har vi lagt till en knapp på klick på vilka nya ändringar som kommer att göras på komponenten. Ovanstående kod kommer att producera följande utgång på knappklick.

Produktion:

Props: Props i ReactJs används för att skicka data till komponenter. Props motsvarar javascript-rena funktionsparametrar. Eftersom rena funktionsparametrar inte kan ändras när de har tilldelats kan vi inte ändra deras värden. Exemplet nedan visar hur rekvisita används:

Koda:

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:

Om komponenten har en konstruktör, bör rekvisitobjekt behövs skickas till konstruktören med super. Här är ett exempel:

Koda:

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:

Jämförelse mellan huvud och huvud mellan React State vs Props (Infographics)

Nedan visas de 4 bästa jämförelserna mellan React State vs Props :

Viktiga skillnader mellan React State vs Props

Låt oss diskutera några av de viktigaste viktiga skillnaderna mellan React State vs Props :

  1. Props är oföränderliga, det vill säga deras innehåll kan inte ändras när den har tilldelats, men tillstånd är ett objekt som används för att hålla data som kan ändras i framtiden, även staten kontrollerar komponentens beteende efter att ändringen har gjorts.
  2. Både Props och tillstånd används för att lagra data relaterade till en komponent.
  3. Stater kan endast användas i klasskomponenter medan rekvisita inte har en sådan begränsning.
  4. Props ställs vanligtvis ut av moderkomponenten medan staten styrs av evenemangshanterare, det vill säga de hanteras av själva komponenten.
  5. Tillstånd är lokalt för en komponent och kan inte användas i andra komponenter medan Props tillåter barnkomponenter att läsa värden från överkomponenter.

Jämförelsetabell över reaktionsstatus kontra rekvisita

Tabellen nedan sammanfattar jämförelserna mellan React State vs Props :

React State Rekvisita
React State är mutable och dess värde kan ändras enligt krav.Props är oföränderliga, det vill säga deras innehåll kan inte ändras när den har tilldelats.
Stater kan endast användas av klasskomponenter.Props kan användas av klass såväl som andra komponenter.
Ställ in av överkomponenten.Ställ in av evenemangshanterare, det vill säga de hanteras helt av komponenten själv.
Tillståndet är lokalt för en komponent och kan inte användas i andra komponenter.Props tillåter barnkomponenter att läsa värden från föräldrakomponenter.

Slutsats

Efter att ha täckt funktioner i både tillstånd och rekvisita har vi kommit fram till att närhelst det finns en möjlighet till fastighetsförändringar relaterade till en komponent, så bör vi föredra tillstånd eftersom det tillåter återgivning av egenskaper. Props å andra sidan gör det möjligt för barnkomponenter att få åtkomst till metoder som definieras i föräldrakomponenter, vilket minimerar behovet av att barnkomponenter har sitt tillstånd. Rekvisita är skrivskyddad i barnkomponenter. Det är värt att notera att tillstånd och rekvisita är mycket viktiga komponenter i reaktionsarkitekturen.

Rekommenderade artiklar

Detta är en guide till React State vs Props. Här diskuterar vi också de viktigaste skillnaderna i React State vs Props med infografik och jämförelsetabell. Du kan också titta på följande artiklar för att lära dig mer -

  1. GitHub intervjufrågor
  2. Toppskillnader - Jira vs Github
  3. Topp 19 ReactJs intervjufrågor
  4. Topp 10 användningar av React JS
  5. De 11 bästa reaktionsverktygen med deras funktioner

Kategori:

Mjukvaruutveckling