Razlika između React State -a i rekvizita

U ovom članku React State vs Props, utvrdit ćemo velike razlike između dvije vrlo važne komponente reakcije, stanje i rekviziti. Pokrivat ćemo nekoliko osnovnih primjera kako bismo otkrili razlike između stanja i rekvizita. Također, vidjet ćemo situacije u kojima se mogu koristiti stanje ili rekviziti.

Stanje: Država se može smatrati primjerom reakcijske klase komponenata i uglavnom se koristi za komunikaciju s komponentom. Stanje reaktivne komponente je objekt koji sadrži informacije koje se mogu ili ne moraju promijeniti tijekom životnog ciklusa komponente. Državni objekt pohranjuje vrijednosti svojstava povezanih s komponentom. Kad god dođe do promjene svojstava koja se odnose na komponentu, vrijednost povezana s objektom stanja se mijenja i komponenta će se ponovo prikazati, što znači da će se promijeniti s novim vrijednostima. Evo primjera koji će objasniti stanje reakcije:

Kodirati:

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

);
)
)

Izlaz:

Sada razmotrimo da želimo promijeniti svojstva komponenata. Da bi se to postiglo, postoji metoda koja se zove setState (). Imajte na umu da biste uvijek trebali koristiti metodu setState () za promjenu stanja komponente, ona će osigurati da će komponenta ponovo prikazati svoje stanje.

Kodirati:

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)

To je (this.state.color)
(This.state.Modelnumber)
od (this.state.launch-year).


type = "gumb"
onClick = (this.changeColor)
> Promjena boje bicikla
);
)
)

U gore navedenom kodu kliknuli smo gumb na kojem će se nove promjene prikazati na komponenti. Gore navedeni kôd proizvest će sljedeći izlaz klikom na gumb.

Izlaz:

Rekviziti: rekviziti u ReactJ-u koriste se za slanje podataka na komponente. Podupirači su ekvivalentni parametrima čiste funkcije JavaScripta. Budući da se čisti parametri funkcija ne mogu promijeniti jednom dodijeljeni, ne možemo promijeniti njihove vrijednosti. Ispod će primjer pokazati kako se koriste rekviziti:

Kodirati:

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

Izlaz:

Ako komponenta ima konstruktor, tada treba upotrijebiti rekvizit objekt da se konstruktoru prebaci super. Evo primjera:

Kodirati:

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

Izlaz:

Usporedba između React State i rekvizita (Infographics)

Ispod su 4 najbolje usporedbe između React State-a i Props-a :

Ključne razlike između React State i rekvizita

Razgovarajmo o nekim glavnim ključnim razlikama između React State-a i Props-a :

  1. Podupirači su nepromjenjivi i njihov se sadržaj ne može promijeniti jednom dodijeljen, ali država je objekt koji se koristi za čuvanje podataka koji se mogu promijeniti u budućnosti, a država također kontrolira ponašanje komponente nakon što je izvršena promjena.
  2. I Podupirači i stanja koriste se za spremanje podataka povezanih s komponentom.
  3. Države se mogu koristiti samo u komponentama klase dok rekviziti nemaju takva ograničenja.
  4. Podupirač obično postavlja roditeljska komponenta, dok državom upravljaju obrađivači događaja, odnosno ona sama upravlja komponenta.
  5. Stanje je komponenta lokalna i ne može se koristiti u drugim komponentama, dok rekviziti dopuštaju dječjim komponentama da čitaju vrijednosti iz nadređenih komponenti.

Tabela usporedbe stanja React State vs rekvizita

Donja tablica sažima usporedbe između React State -a i Props-a :

Reagirajuća država Rekviziti
Stanje reakcije je promjenjivo i njegova vrijednost može se mijenjati po zahtjevu.Podupirači su nepromjenjivi, odnosno njihov se sadržaj ne može promijeniti kad im se dodijeli.
Države se mogu koristiti samo komponentama klase.Podupirači se mogu koristiti kao klasa kao i ostali dijelovi.
Postavlja roditeljska komponenta.Postavite od strane obrađivača događaja da je njima potpuno upravlja sama komponenta.
Stanje je komponenta lokalna i ne može se koristiti u drugim komponentama.Podupirači dopuštaju dječjim komponentama čitanje vrijednosti s nadređenih komponenti.

Zaključak

Nakon pokrivanja značajki i stanja i rekvizita, zaključili smo da kad god postoji mogućnost promjena svojstava povezanih s nekom komponentom, tada bismo trebali radije stanje jer omogućuje ponovno prikaz svojstava. Podupirači, s druge strane, dopuštaju dječjim komponentama pristup metodama koje su definirane u roditeljskim komponentama, to minimizira potrebu dječjih komponenti da imaju svoje stanje. Oprema se čita samo u dječjim komponentama. Vrijedno je napomenuti da su stanje i rekviziti vrlo važni dijelovi reakcijske arhitekture.

Preporučeni članci

Ovo je vodič za React State vs Props. Ovdje također raspravljamo o ključnim razlikama React State vs Props s infografikama i tablici usporedbe. Možete također pogledati sljedeće članke da biste saznali više -

  1. GitHub pitanja za intervju
  2. Najbolje razlike - Jira vs Github
  3. Top 19 pitanja o intervjuu za ReactJs
  4. Top 10 korištenja React JS-a
  5. Top 11 alata za reagiranje sa njihovim značajkama

Kategorija:

Razvoj softvera