Różnica między stanem reakcji a rekwizytami

W tym artykule React State vs. Rekwizyty, dowiemy się o głównych różnicach między dwoma bardzo ważnymi składnikami reakcji, stanem i rekwizytami. Omówimy kilka podstawowych przykładów, aby ustalić różnice między stanem a rekwizytami. Zobaczymy również sytuacje, w których można użyć stanu lub rekwizytów.

Stan: Stan można uznać za instancję klasy reagującej na komponenty i jest wykorzystywany głównie do komunikacji z komponentem. Stan reakcji komponentu to obiekt zawierający informacje, które mogą lub nie mogą ulec zmianie w trakcie cyklu życia komponentu. Obiekt stanu przechowuje wartości właściwości związanych ze składnikiem. Ilekroć zachodzi zmiana właściwości związanych ze składnikiem, zmienia się wartość powiązana z obiektem stanu, a składnik ponownie się renderuje, co oznacza, że ​​zmieni się o nowe wartości. Oto przykład, który wyjaśni stan reakcji:

Kod:

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

);
)
)

Wynik:

Rozważmy teraz, że chcemy zmienić właściwości komponentu. Aby to osiągnąć, istnieje metoda o nazwie setState (). Zauważ, że zawsze powinieneś używać metody setState () do zmiany stanu komponentu, upewni się on, że komponent odtworzy swój stan.

Kod:

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)

Jest to (this.state.color)
(this.state.Modelnumber)
od (this.state.launch-year).


type = "button"
onClick = (this.changeColor)
> Zmień kolor roweru
);
)
)

W powyższym kodzie dodaliśmy przycisk po kliknięciu, w którym nowe zmiany będą renderowane w komponencie. Powyższy kod wygeneruje następujący wynik po kliknięciu przycisku.

Wynik:

Rekwizyty: Rekwizyty w ReactJs służą do wysyłania danych do komponentów. Rekwizyty są równoważne parametrom funkcji czystego javascript. Ponieważ czystych parametrów funkcji nie można zmienić po przypisaniu, nie możemy zmienić ich wartości. Poniższy przykład pokaże, jak wykorzystywane są rekwizyty:

Kod:

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

Wynik:

Jeśli komponent ma konstruktor, wówczas obiekt props powinien zostać przekazany do konstruktora za pomocą super. Oto przykład:

Kod:

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

Wynik:

Porównanie między stanem reakcji a rekwizytami (infografiki)

Poniżej znajdują się 4 najlepsze porównania między stanem reakcji a rekwizytami :

Kluczowe różnice między stanem reakcji a rekwizytami

Omówmy niektóre z głównych kluczowych różnic między stanem reakcji a rekwizytami :

  1. Rekwizyty są niezmienne, tzn. Ich zawartości nie można zmienić po przypisaniu, ale stan jest obiektem używanym do przechowywania danych, które mogą ulec zmianie w przyszłości, a także stan kontroluje zachowanie komponentu po dokonaniu zmiany.
  2. Zarówno rekwizyty, jak i stany są używane do przechowywania danych związanych ze składnikiem.
  3. Stany mogą być używane tylko w komponentach klasy, podczas gdy rekwizyty nie mają takich ograniczeń.
  4. Rekwizyty są generalnie ustawiane przez komponent nadrzędny, podczas gdy stan jest regulowany przez procedury obsługi zdarzeń, czyli jest zarządzany przez sam komponent.
  5. Stan jest lokalny dla komponentu i nie może być używany w innych komponentach, podczas gdy rekwizyty pozwalają komponentom potomnym na odczytywanie wartości z komponentów macierzystych.

Tabela porównawcza stanu reakcji a rekwizyty

Poniższa tabela podsumowuje porównania między stanem reakcji a rekwizytami :

Reaguj stan Rekwizyty
Stan reakcji jest zmienny, a jego wartość można zmienić zgodnie z wymaganiami.Rekwizyty są niezmienne, tzn. Ich zawartości nie można zmienić po przypisaniu.
Stany mogą być używane tylko przez komponenty klasy.Rekwizyty mogą być używane zarówno przez klasę, jak i inne elementy.
Ustawiony przez komponent nadrzędny.Ustawiane przez procedury obsługi zdarzeń, to znaczy, że są one całkowicie zarządzane przez sam komponent.
Stan jest lokalny dla komponentu i nie może być używany w innych komponentach.Rekwizyty pozwalają komponentom potomnym odczytywać wartości z komponentów macierzystych.

Wniosek

Po omówieniu cech zarówno stanu, jak i rekwizytów, doszliśmy do wniosku, że ilekroć istnieje możliwość zmian właściwości związanych ze składnikiem, powinniśmy preferować stan, ponieważ pozwala on na ponowne renderowanie właściwości. Z drugiej strony rekwizyty umożliwiają komponentom podrzędnym dostęp do metod zdefiniowanych w komponentach nadrzędnych, co minimalizuje potrzebę posiadania stanu przez komponenty podrzędne. Rekwizyty są tylko do odczytu w komponentach potomnych. Warto zauważyć, że stan i rekwizyty to bardzo ważne elementy architektury reagowania.

Polecane artykuły

To jest przewodnik po React State vs. Rekwizyty. Tutaj omawiamy także kluczowe różnice stanu React vs. Rekwizyty z infografikami i tabelą porównawczą. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

  1. Pytania do wywiadu GitHub
  2. Najważniejsze różnice - Jira vs Github
  3. Top 19 pytań do wywiadu ReactJs
  4. Top 10 zastosowań React JS
  5. Top 11 narzędzi React z ich funkcjami

Kategoria:

Rozwój oprogramowania