Реагујте компоненте - реквизити и стања у РеацтЈС са примерима

„У Реацт-у је све компонента“

Ако сте упознати са Реацтом, онда сте сигурно много пута чули или прочитали ову фразу. Али да ли знате шта тачно значи и како се користи? Ако не, прочитајте овај блог да бисте сазнали све о Реацт компонентама и различитим фазама у животном циклусу. Сигуран сам да док завршиш читајући овај блог имаћете потпуно разумевање Реацт компоненти и концепата који га окружују. Али пре него што наставите, на брзину погледајте теме о којима ћу разговарати:

• Шта су реактивне компоненте?
• Предности реактивних компоненти
• Реквизити
• државе
• Државе против реквизита
• Реагујте на животни циклус компоненте

Шта су реактивне компоненте?

Раније су програмери морали да напишу 1000 линија кода за развој једноставне апликације на једној страници. Већина тих апликација следила је традиционалну ДОМ структуру и уношење промена у њих било је веома изазовно и досадан задатак за програмере.Морали су ручно да траже елемент коме је потребна промена и да га у складу с тим ажурирају. Чак и мала грешка довела би до неуспеха апликације. Штавише, ажурирање ДОМ-а било је веома скупо. Тако је уведен приступ заснован на компонентама. У овом приступу, цела апликација је подељена на логичке делове који се називају компонентама. Реацт је био један од оквира који се одлучио за овај приступ.Ако планирате да своју каријеру градите у веб развоју, рани почетак би вам отворио пуно прилика.

Хајде сада да разумемо које су то компоненте.

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

Ово одржава наш кориснички интерфејс организованим и омогућава да подаци и промене стања логично прелазе из корена у гране, а затим у подгране. Компоненте упућују позив серверу директно са клијентске стране што омогућава ДОМ-у да се динамички ажурира без освежавања странице. То је зато што су компоненте реакције изграђене на концепту АЈАКС захтева. Свака компонента има свој интерфејс који може упућивати позиве серверу и ажурирати их. Како су ове компоненте независне једна од друге, свака се може освежити без утицаја на друге или на кориснички интерфејс у ​​целини.

Користимо Реацт.цреатеЦласс () метода за стварање компоненте. Овој методи се мора проследити аргумент објекта који ће дефинисати компоненту Реацт. Свака компонента мора да садржи тачно једну дати, пружити() метода. То је најважније својство компоненте која је одговорна за рашчлањивање ХТМЛ-а у ЈаваСцрипт-у, ЈСКС. Ово дати, пружити() вратиће ХТМЛ представу компоненте као ДОМ чвор. Због тога све ХТМЛ ознаке морају бити затворене у затворену ознаку унутар дати, пружити() .

Следи пример кода за креирање компоненте.

најбоља јава иде за почетнике

увоз Реацт из 'реаговања' увоз РеацтДОМ из класе 'респонсе-дом' МиЦомпонент проширује Реацт.Цомпонент {рендер () {ретурн (
Ваш Ид је {тхис.стате.ид}
)}} РеацтДОМ.рендер (, доцумент.гетЕлементБиИд ('садржај'))

Државе против реквизита

Реагујте на животни циклус компоненте

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

1. Почетна фаза
2. Фаза ажурирања
3. Реквизити мењају фазу
4. Фаза демонтаже

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

а. Почетна фаза - Прва фаза животног циклуса реактивне компоненте је почетна фаза или почетна фаза приказивања. У овој фази,компонента ће ускоро започети путовање и кренути до ДОМ-а. Ова фаза се састоји од следећих метода које се позивају у унапред дефинисаном редоследу.

1. гетДефаултПропс (): Овом методом се одређује подразумевана вредност ово.реквизити . Позива се пре него што је ваша компонента уопште креирана или у њу прослеђени било који реквизити родитеља.
2. гетИнитиалСтате (): Ова метода се користи заспецификовати подразумевана вредност ово.држава пре него што се креира ваша компонента.
3. цомпонентВиллМоунт (): Ово је последња метода коју можете да позовете пре него што се компонента прикаже у ДОМ. Али ако позовете сетСтате () унутар ове методе ваша компонента се неће поново приказати.
4. дати, пружити(): Тх је метода одговорна за враћање једног коријенског ХТМЛ чвора и мора бити дефинисана у свакој компоненти. Можете се вратити нула или лажно у случају да не желите ништа да прикажете.
5. цомпонентДидМоунт (): Једном када се компонента генерише и постави на ДОМ, ово метода се назива. Овде можете извршити било које операције ДОМ упита.

б. Фаза ажурирања - Једном када се компонента дода у ДОМ, могу се ажурирати и поново приказати само када дође до промене стања. Сваки пут када се стање промени, компонента позива свој дати, пружити() опет. Свака компонента која се ослања на излаз ове компоненте такође ће позвати своју дати, пружити() опет. То је учињено како би се осигурало да наша компонента приказује најновију верзију себе. Стога се за успешно ажурирање стања компоненти позивају следеће методе у датом редоследу:

1. схоулдЦомпонентУпдате (): Коришћењем ове методе можете да контролишете понашање компоненте која се ажурира. Ако из ове методе вратите тачно,компонента ће се ажурирати. Иначе ако овај метод враћа алажно, компонента ће прескочити ажурирање.
2. цомпонентВиллУпдате (): Т.зове се његова метода јуст пре него што се ваша компонента спрема да се ажурира. У овом начину позивањем не можете да промените стање компоненте тхис.сетСтате .
3. дати, пружити(): Ако враћате фалсе путем схоулдЦомпонентУпдате () , код изнутра дати, пружити() биће поново позвани како би се осигурало да се ваша компонента правилно приказује.
4. цомпонентДидУпдате (): Једном када се компонента ажурира и генерише, тада се позива ова метода. У овај метод можете ставити било који код који желите да извршите након што се компонента ажурира.

ц. Фаза промене реквизита - После компонента је приказана у ДОМ-у, једини пут када ће се компонента ажурирати, осим промене стања је и када се њена вредност ослонца промени. Практично ова фаза ради слично као у претходној фази, али уместо државе, она се бави реквизитима. Дакле, ова фаза има само један додатни метод из фазе ажурирања.

1. цомпонентВиллРецеивеПропс (): Ова метода враћа један аргумент који садржи нову вредност пропа која ће бити додељена компоненти.
   Преостале методе животног циклуса понашају се идентично методама које смо видели у претходној фази.
   
2. схоулдЦомпонентУпдате ()
3. цомпонентВиллУпдате ()
4. дати, пружити()
5. цомпонентДидУпдате ()

д.Фаза демонтаже -Ово је последња фаза животног циклуса компонената у којој се компонента уништава и потпуно уклања из ДОМ-а. Садржи само један метод:

1. цомпонентВиллУнмоунт (): Једном када се овај метод позове, ваша компонента се трајно уклања из ДОМ-а.У овој методи, И.можете обављати било које задатке повезане са чишћењем, попут уклањања слушалаца догађаја, заустављања тајмера итд.

Следи читав дијаграм животног циклуса:

Ово нас доводи до краја блога о Реацт Цомпонентс. Надам се да сам на овом блогу успео да јасно објасним шта су Реацт компоненте, како се користе. Можете се позвати на мој блог на , у случају да желите да сазнате више о РеацтЈС-у.

Ако желите да се обучите за Реацт и желите сами да развијете занимљив кориснички интерфејс, погледајте Едурека, поуздана компанија за учење на мрежи са мрежом од више од 250 000 задовољних ученика раширених широм света.

Имате питање за нас? Молимо вас да то споменете у одељку за коментаре и јавићемо вам се.