Реацт је фронт-енд ЈаваСцрипт оквир. Иако прављење ХТМЛ страница и управљање њима може постати досадно, Реацт олакшава ствари тако што разбија елементе на екрану и њихову логику на компоненте.

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

Шта су куке у РеацтЈС-у?

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

цонст [променљива, сетВариабле] = усеСтате (почетна вредност);

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

Постоје две врсте кукица:

• Басиц Хоокс
  1. усеСтате
  2. усеЕффецт
  3. усеЦонтект
• Додатне куке
  1. усеРеф
  2. усеМемо
  3. усеРедуцер

усеСтате()

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

Можете погледати претходни пример за синтаксу Реацт кука. Најједноставнији пример за објашњење усеСтате() је пример променљиве цоунт:

импорт {усеСтате} из "реацт";
фунцтион Апп() {
цонст [цоунт, сетЦоунт] = усеСтате (0);
повратак (


Пример кукица

{цоунт}

сетЦоунт (број+1)}>Додај
сетЦоунт (цоунт-1)}>Субтрацт



);
}

Тхе усеСтате кука има променљиву и метод који се користи за подешавање вредности променљиве. Тхе усеСтате кука прихвата почетну вредност стања као параметар. Можете подесити било коју вредност за променљиву цоунт користећи сетЦоунт методом.

У горњем коду постоје два дугмета за повећање и смањење вредности цоунт променљива. Док повећавате, можете додати +1 тренутном стању бројања и -1 да бисте смањили број за 1.

усеЕффецт

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

Класичан пример коришћења усеЕффецт кука је преузимање података из АПИ-ја или израчунавање лајкова или претплата на објаву.

усеЕффецт(()=>{
// цоде
},[низ зависности]);

Узимајући у обзир горњи пример

импорт { усеСтате, усеЕффецт } из "реацт";
фунцтион Апп() {
цонст [цоунт, сетЦоунт] = усеСтате (0);
усеЕффецт(() => {
доцумент.титле = `Кликнули сте ${цоунт} пута`;
}, [број]);
повратак (


Пример кукица

{цоунт}

 сетЦоунт (број + 1)}>Додај



);
}

Приликом проласка цоунт променљива стања у усеЕффецт низ зависности, проверава да ли се стање променило или не. Затим поставља наслов документа на променљиву цоунт.

усеЦонтект

Тхе усеЦонтект кука помаже да се подаци прођу кроз компоненту без ручног рада преко реквизита. То чини коришћење Цонтект АПИ-ја брзим и лаким. Имаћете боље разумевање након што прођете кроз пример.

Прво, схватите како изгледа код без коришћења контекста. Као што видите, морате проследити текст преко пропс-а у подређену компоненту. Да бисте избегли сложеност, можете користити усеЦонтект кука.

извоз подразумеване функције Апп() {
лет тект = "Здраво, добродошли у МУО";
повратак (






);
}
цонст ЦхилдЦомпонент = ({ тект }) => {
повратак 
{тект}
;
};

Прво, креирајте провајдера у својој главној датотеци (Апп.јс).

цонст Цонтект = Реацт.цреатеЦонтект (нулл);

Тхе Апликација компонента је компонента највишег нивоа или "родитељска" компонента. Морате умотати целу компоненту у и проследите објекат или податке које желите да прикажете подређеној компоненти.

извоз подразумеване функције Апп() {
лет тект = "Здраво, добродошли у МУО";
повратак (








);
}

Сада креирајте подређену компоненту и приступите текстуалном пропу користећи усеЦонтект кука. Пасс тхе Контекст променљива користећи цреатеЦонтект.

цонст ЦхилдЦомпонент = () => {
нека текст = усеЦонтект (контекст);
цонсоле.лог (текст);
повратак 
{тект}
;
};

Повезан: ЈаваСцрипт оквири вредни учења​​​​​

Много више за истраживање уз Реацт

Управо сте научили основе кукица. То је једна од најбољих карактеристика Реацт-а, и прилично погодна за програмере. Реацт је један од најбољих фронтенд оквира за учење данас за прилике за посао, креирање апликација на једној страници или једноставно да проширите своје знање програмирања.

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

Како користити реквизите у РеацтЈС-у

Ако тражите савете о томе како да користите пропс у РеацтЈС-у, на правом сте месту.

Реад Нект

О аутору