Разлика између Реацт Стате-а и реквизита

У овом чланку Реацт Стате вс Пропс, утврдићемо велике разлике између две врло важне компоненте реакције, стања и реквизита. Покрићемо неколико основних примера да бисмо открили разлике између стања и реквизита. Такође, видећемо ситуације у којима се могу користити стања или реквизити.

Држава: Држава се може сматрати примјером класе компонената реакције и углавном се користи за комуникацију с компонентом. Стање реактивне компоненте је предмет који садржи информације које се могу или не морају мењати током животног циклуса компоненте. Државни објект похрањује вриједности својстава повезаних с компонентом. Кад год дође до промене својстава повезаних са компонентом, вредност повезана са објектом стања се мења и компонента ће се поново приказати што значи да ће се сама променити новим вредностима. Ево примера који ће објаснити стање реакције:

Шифра:

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

);
)
)

Излаз:

Сада размотримо да желимо да променимо својства компонената. Да бисте то постигли, постоји метода која се зове сетСтате (). Имајте на уму да бисте увек требали користити методу сетСтате () да бисте променили стање компоненте, она ће осигурати да ће компонента поново показати њено стање.

Шифра:

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)

То је (тхис.стате.цолор)
(тхис.стате.Моделнумбер)
од (тхис.стате.лаунцх-иеар).


типе = "дугме"
онЦлицк = (тхис.цхангеЦолор)
> Промените боју бицикла
);
)
)

У горе наведеном коду кликнули смо дугме на коме ће се нове компоненте приказати на компоненти. Горњи код ће произвести следећи излаз кликом на дугме.

Излаз:

Реквизити: реквизити у РеацтЈ-у користе се за слање података на компоненте. Подупирачи су еквивалентни параметрима чистих функција ЈаваСцрипт. Пошто се чисти параметри функција не могу променити када су додељени, не можемо да мењамо њихове вредности. Следећи пример ће показати како се користе реквизити:

Шифра:

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

Излаз:

Ако компонента има конструктор, тада би требао бити потребан прослеђивани објект прослеђен конструктору користећи супер. Ево примера:

Шифра:

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

Излаз:

Упоредна упоредба између Реацт Стате-а и реквизита (Инфограпхицс)

Испод су 4 најбоље поређења између Реацт Стате-а и Пропс-а :

Кључне разлике између државе Реацт и реквизита

Хајде да разговарамо о неким главним кључним разликама између Реацт Стате-а и Пропс-а :

  1. Подупирачи су непроменљиви, јер се њихов садржај не може променити када је додељен, али држава је објект који се користи за чување података који се у будућности могу променити, а такође држава контролише понашање компоненте након промене.
  2. И реквизити и стања користе се за чување података који се односе на компоненту.
  3. Државе се могу користити само у компонентама класе док реквизити немају таква ограничења.
  4. Подупирачи се обично постављају надређеном компонентом, док државом управљају руковаоци догађајима, тј. Њима управља сама компонента.
  5. Стање је локално компоненти и не може се користити у другим компонентама, док реквизити дозвољавају дјеци да читају вриједности из надређених компоненти.

Табела упоређивања државе Реацт вс реквизита

Табела у наставку резимира поређења између Реацт Стате-а и Пропс-а :

Реацт Стате Реквизити
Реацт Стате је променљиво и његова вредност може се мењати према захтеву.Подупирачи су непроменљиви, односно њихов садржај се не може мењати једном додељеним.
Државе могу користити само компоненте класе.Подупирачи се могу користити као класа као и друге компоненте.
Поставља родитељска компонента.Постављени од стране обрађивача догађаја да они њима у потпуности управља сама компонента.
Држава је локалној компоненти и не може се користити у другим компонентама.Подупирачи омогућавају дјечјим компонентама да читају вриједности с надређених компоненти.

Закључак

Након покривања карактеристика стања и реквизита, закључили смо да кад год постоји могућност промене својства повезаних са неком компонентом, тада би требало да преферирамо стање јер омогућава рендерирање својстава. Подржавајући реквизити, с друге стране, дозвољавају дечјим компонентама приступ методама које су дефинисане у родитељским компонентама, то минимизира потребу да дечије компоненте имају своје стање. Подупирачи су само за читање на дечјим компонентама. Вриједно је напоменути да су стање и реквизити врло битне компоненте реактивне архитектуре.

Препоручени чланци

Ово је водич за Реацт Стате вс Пропс. Овде такође расправљамо о кључним разликама Реацт Стате вс Пропс с инфографикама и табели упоређивања. Можда ћете такође погледати следеће чланке да бисте сазнали више -

  1. ГитХуб питања за интервју
  2. Најбоље разлике - Јира вс Гитхуб
  3. Топ 19 питања о интервјуу за РеацтЈс
  4. Топ 10 употреба Реацт ЈС-а
  5. Топ 11 алата за реаговање са њиховим карактеристикама

Категорија:

Развој софтвера