Разлика между Реактивна държава срещу подпори

В тази статия React State срещу Props ще разберем основните разлики между два много важни компонента на реакцията, състояние и реквизит. Ще разгледаме някои основни примери, за да разберем разликите между състоянието и подпорите. Също така ще видим ситуации, при които може да се използва състояние или реквизит.

Състояние: държавата може да се разглежда като екземпляр от клас компоненти на реагиране и се използва главно за комуникация с компонент. Състоянието на реагиращ компонент е обект, който съдържа информация, която може или не може да се промени през жизнения цикъл на компонента. Обектът на държавата съхранява стойности на свойствата, свързани с компонент. Всеки път, когато има промяна в свойствата, свързани с даден компонент, стойността, свързана с обекта на състоянието, се променя и компонентът ще се представи отново, което означава, че ще се промени от новите стойности. Ето един пример, който ще обясни състоянието на реакцията:

Код:

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

);
)
)

изход:

Сега нека помислим, че искаме да променим свойствата на компонента. За да се постигне това, съществува метод, наречен setState (). Обърнете внимание, че винаги трябва да използвате метода setState (), за да промените състоянието на компонент, той ще се увери, че компонентът ще възстанови състоянието си.

Код:

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)

Това е (this.state.color)
(This.state.Modelnumber)
от (this.state.launch-year).


тип = "бутон"
OnClick = (this.changeColor)
> Промяна на цвета на велосипеда
);
)
)

В горния код сме добавили бутон при щракване, върху който ще бъдат направени нови промени на компонента. Горният код ще даде следния изход при натискане на бутона.

изход:

Реквизит : Реквизитите в ReactJs се използват за изпращане на данни до компоненти. Реквизитите са еквивалентни на параметрите на чисти функции на JavaScript. Тъй като чистите функционални параметри не могат да се променят веднъж присвоени, ние не можем да променим техните стойности. Примерът по-долу ще покаже как се използват реквизитите:

Код:

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

изход:

Ако компонентът има конструктор, след това обектът на реквизит трябва да бъде предаден на конструктор, използвайки super. Ето един пример:

Код:

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

изход:

Сравнение между главата на React State срещу Props (Инфографика)

По-долу са най-добрите 4 сравнения между React State и Props :

Ключови разлики между React State срещу Props

Нека да обсъдим някои от основните ключови разлики между React State срещу Props :

  1. Реквизитите са неизменни, това е, че тяхното съдържание не може да бъде променено, след като бъде присвоено, но състоянието е обект, който се използва за съхраняване на данни, които могат да се променят в бъдеще, а също така държавата контролира поведението на компонента след извършване на промяната.
  2. Както Props, така и състояния се използват за съхранение на данни, свързани с компонент.
  3. Щатите могат да се използват само в компоненти на класа, докато реквизитите нямат такова ограничение.
  4. Реквизитите обикновено се задават от родителския компонент, докато състоянието се управлява от обработващи събития, тоест те се управляват от самия компонент.
  5. State е локален за компонент и не може да се използва в други компоненти, докато Props позволяват на компонентите на деца да четат стойности от родителските компоненти.

Таблица за сравнение на Реактивна държава срещу подпори

Таблицата по-долу обобщава сравненията между React State и Props :

Реагираща държава подпори
Реагиращата държава е изменяема и нейната стойност може да бъде променена според изискването.Реквизитите са неизменни, тоест тяхното съдържание не може да бъде променено, след като бъде присвоено.
Състоянията могат да се използват само от компоненти на класа.Реквизитите могат да се използват както от клас, така и от други компоненти.
Зададен от родителския компонент.Зададени от обработващи събития, че те са напълно управлявани от самия компонент.
Състоянието е локално за компонент и не може да се използва в други компоненти.Реквизитите позволяват на дъщерните компоненти да четат стойности от родителските компоненти.

заключение

След като покрихме характеристиките както на състоянието, така и на подпорите, ние заключихме, че винаги, когато съществува възможност за промени в свойствата, свързани с даден компонент, тогава трябва да предпочитаме състояние, тъй като позволява повторно представяне на свойствата. Реквизитите, от друга страна, позволяват на компонентите на деца да имат достъп до методи, дефинирани в родителските компоненти, това свежда до минимум необходимостта от детските компоненти да имат своето състояние. Реквизитите са само за четене в детски компоненти. Заслужава да се отбележи, че състоянието и реквизитите са много важни компоненти на реакционната архитектура.

Препоръчителни статии

Това е ръководство за React State срещу Props. Тук също обсъждаме ключовите разлики между React State и Props с инфографиката и таблицата за сравнение. Може да разгледате и следните статии, за да научите повече -

  1. Въпроси за интервю на GitHub
  2. Топ разлики - Jira vs Github
  3. Топ 19 въпроса за интервю на ReactJs
  4. Топ 10 употреби на React JS
  5. Топ 11 инструменти за реагиране с техните функции

Категория:

Разработване на софтуер