React Components - Пропс и състояния в ReactJS с примери

„В React всичко е компонент“

Ако сте запознати с React, тогава трябва да сте чували или чели тази фраза много пъти. Но знаете ли какво означава точно и как се използва? Ако не го направите, прочетете този блог, за да научите всичко за компонентите на React и различните фази в жизнения цикъл. Сигурен съм, че докато свършите четейки този блог ще имате пълно разбиране за компонентите на React и концепциите около него. Но преди да продължите, разгледайте набързо темите, които ще обсъждам:

• Какво представляват React компонентите?
• Предимства на React компонентите
• Реквизит
• Държави
• Щати срещу реквизит
• Реагирайте на жизнения цикъл на компонентите

Какво представляват React компонентите?

По-рано разработчиците трябваше да напишат 1000 реда код за разработване на просто приложение на една страница. Повечето от тези приложения следваха традиционната DOM структура и правенето на промени в тях беше много предизвикателно и досадна задача за разработчиците.Те трябваше ръчно да търсят елемента, който се нуждае от промяната, и да го актуализират съответно. Дори малка грешка би довела до неуспех на приложението. Освен това актуализирането на DOM беше много скъпо. По този начин беше въведен подход, базиран на компоненти. При този подход цялото приложение е разделено на логически парчета, които се наричат ​​Компоненти. React беше една от рамките, която избра този подход.Ако планирате да изградите кариерата си в уеб разработката, ранното стартиране ще ви отвори много възможности.

Нека сега разберем какви са тези компоненти.

React компонентите се считат за градивните елементи на потребителския интерфейс. Всеки от тези компоненти съществува в едно и също пространство, но се изпълнява независимо един от друг. Компонентите на React имат своя собствена структура, методи, както и API. Те са многократно използвани и могат да се инжектират в интерфейси според нуждите. За да имате по-добро разбиране, разгледайте целия потребителски интерфейс като дърво.Тук изходният компонент става коренът и всяка от независимите части се превръща в клонове, които допълнително се разделят на под-клонове.

Това поддържа нашия потребителски интерфейс организиран и позволява промените в данните и състоянието да преминават логически от корена към клонове и след това към под-клонове. Компонентите осъществяват повиквания към сървъра директно от страна на клиента, което позволява на DOM да се актуализира динамично, без да опреснява страницата. Това е така, защото компонентите за реакция са изградени върху концепцията за заявки AJAX. Всеки компонент има собствен интерфейс, който може да осъществява повиквания към сървъра и да ги актуализира. Тъй като тези компоненти са независими един от друг, всеки може да се опресни, без да засяга другите или потребителския интерфейс като цяло.

Ние използваме React.createClass () метод за създаване на компонент. На този метод трябва да се предаде аргумент на обект, който ще определи React компонента. Всеки компонент трябва да съдържа точно един render () метод. Това е най-важното свойство на компонент, който е отговорен за синтактичния анализ на HTML в JavaScript, JSX. Това render () ще върне HTML представянето на компонента като DOM възел. Следователно всички HTML тагове трябва да бъдат затворени в затварящ таг вътре в render () .

Следва примерен код за създаване на компонент.

как да използвам goto c ++

импортиране на React от 'реагиране' импортиране на ReactDOM от клас 'response-dom' MyComponent разширява React.Component {render () {return (
Вашият идентификационен номер е {this.state.id}
)}} ReactDOM.render (, document.getElementById ('съдържание'))

Щати срещу реквизит

Реагирайте на жизнения цикъл на компонентите

React предоставя различни методи, които уведомяват, когато настъпи определен етап от жизнения цикъл на даден компонент. Тези методи се наричат ​​методи на жизнения цикъл. Тези методи на жизнения цикъл не са много сложни. Можете да мислите за тези методи като за специализирани манипулатори на събития, които се извикват в различни точки по време на живота на компонентите. Можете дори да добавите собствен код към тези методи, за да изпълнявате различни задачи. Говорейки за жизнения цикъл на компонента, жизненият цикъл е разделен на 4 фази. Те са:

1. Начална фаза
2. Фаза на актуализиране
3. Реквизитът променя фазата
4. Фаза за демонтиране

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

а. Начална фаза - Първата фаза от жизнения цикъл на React компонент е началната фаза или началната фаза на рендиране. В тази фаза,компонентът е на път да започне своето пътуване и да си проправи път към DOM. Тази фаза се състои от следните методи, които се извикват в предварително зададен ред.

1. getDefaultProps (): Този метод се използва за определяне на стойността по подразбиране на this.props . Той се извиква, преди компонентът ви дори да бъде създаден или в него да бъдат предадени реквизити от родителя.
2. getInitialState (): Този метод се използва зауточни стойността по подразбиране на това.състояние преди компонентът ви да бъде създаден.
3. componentWillMount (): Това е последният метод, който можете да извикате, преди компонентът ви да бъде изобразен в DOM. Но ако се обадите setState () вътре в този метод вашият компонент няма да се изобрази отново.
4. render (): Th е метод е отговорен за връщането на един корен HTML възел и трябва да бъде дефиниран във всеки компонент. Можете да се върнете нула или невярно в случай, че не искате да изобразите нищо.
5. componentDidMount (): След като компонентът се изобрази и постави в DOM, това метод се извиква. Тук можете да извършвате всякакви операции за DOM заявки.

б. Фаза на актуализиране - След като компонентът бъде добавен към DOM, те могат да се актуализират и рендерират само когато настъпи промяна на състоянието. Всеки път, когато състоянието се променя, компонентът извиква своя render () отново. Всеки компонент, който разчита на изхода на този компонент, също ще извика своя render () отново. Това се прави, за да се гарантира, че нашият компонент показва най-новата версия на себе си. По този начин за успешно актуализиране на състоянието на компонентите се извикват следните методи в дадения ред:

1. shouldComponentUpdate (): Използвайки този метод, можете да контролирате поведението на вашия компонент при самото актуализиране. Ако върнете вярно от този метод,компонентът ще се актуализира. В противен случай, ако този метод връща aневярно, компонентът ще пропусне актуализирането.
2. componentWillUpdate (): тнеговият метод се нарича just, преди компонентът ви да се актуализира. В този метод не можете да промените състоянието на компонента си, като се обадите this.setState .
3. render (): Ако връщате false чрез shouldComponentUpdate () , кодът вътре render () ще бъде извикан отново, за да се гарантира, че вашият компонент се показва правилно.
4. componentDidUpdate (): След като компонентът се актуализира и изобрази, този метод се извиква. Можете да поставите всеки код вътре в този метод, който искате да изпълните, след като компонентът бъде актуализиран.

° С. Фаза за смяна на реквизита - След компонентът е рендиран в DOM, единственият друг път компонентът ще се актуализира, освен промяната на състоянието, когато неговата стойност на проп се промени. На практика тази фаза работи подобно на предишната фаза, но вместо с държавата, тя се занимава с подпорите. По този начин тази фаза има само един допълнителен метод от фазата на актуализиране.

1. componentWillReceiveProps (): Този метод връща един аргумент, който съдържа новата проп стойност, която е на път да бъде присвоена на компонента.
   Останалите методи на жизнения цикъл се държат идентично с методите, които видяхме в предишната фаза.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. render ()
5. componentDidUpdate ()

д.Фазата на демонтиране -Това е последната фаза на жизнения цикъл на компонентите, в която компонентът се унищожава и премахва напълно от DOM. Той съдържа само един метод:

1. componentWillUnmount (): След като този метод бъде извикан, вашият компонент се премахва от DOM за постоянно.При този метод, Y.можете да изпълнявате всякакви задачи, свързани с почистването, като премахване на слушатели на събития, спиране на таймери и т.н.

Следва цялата диаграма на жизнения цикъл:

Това ни води до края на блога за React Components. Надявам се, че в този блог успях ясно да обясня какво представляват React Components, как се използват. Можете да се обърнете към моя блог на , в случай че искате да научите повече за ReactJS.

Ако искате да се обучите в React и искате сами да разработите интересен потребителски интерфейс, тогава разгледайте от Edureka, доверена компания за онлайн обучение с мрежа от над 250 000 доволни учащи, разпространени по целия свят.

Имате въпрос към нас? Моля, споменете го в раздела за коментари и ние ще се свържем с вас.