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

Додатне куке које ћете научити су усеРеф и усеМемо.

усеРеф

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

Тхе усеРеф кука има само једно својство у себи: .Тренутни. Реацт не рендерује страницу када се њен елемент промени. Нити се поново приказује ако промените вредност .Тренутни својство. Хајде да разумемо употребу ове куке на примеру:

импорт Реацт, { усеСтате, усеРеф } из 'реацт';
извоз подразумеване функције Апп() {
цонст цоунт = усеРеф (нулл);

instagram viewer


цонст [број, сетНумбер] = усеСтате (0);
цонст цхецкНумбер = () => {
иф (цоунт.цуррент.валуе < 10) {
цоунт.цуррент.стиле.бацкгроундЦолор = "црвено";
} остало {
цоунт.цуррент.стиле.бацкгроундЦолор = "зелено";
}
};
повратак (


Унесите број већи од 10

реф={цоунт}
типе="тект"
вредност={број}
онЦханге={(е) => сетНумбер (е.таргет.валуе)}
/>
 цхецкНумбер()}>Кликните



);
}

У горњем коду, боја елемента за унос се мења у складу са бројем који унесете у поље за унос. Прво, додељује резултат из усеРеф() кука за цоунт променљива. Постоје два елемента: улаз и дугме. Улазни елемент има вредност број и, тхе реф својство улазне ознаке је цоунт да одговара променљивој.

Када кликнете на дугме, број провере() функција се позива. Ова функција проверава да ли је вредност број је већи од 10. То онда поставља боју позадине улазног елемента помоћу цоунт.цуррент.стиле.бацкгроундЦолор својство.

Повезан: Основе ЦСС-а: Рад са бојама

усеМемо

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

Синтакса оф тхе усеМемо кука је следећа:

цонст мемоизедВалуе = усеМемо(() => цомпутеЕкпенсивеВалуе (а), [а]);

За боље разумевање, размотримо пример. Код испод мења боје два наслова. То зове усеСтате кука за праћење њихових вредности. Функција показује да ли је боја топла или хладна према њеној вредности. Пре враћања статуса боје, постоји петља вхиле која се паузира отприлике једну секунду. Ово је у сврху демонстрације, како би се објасниле предности усеМемо кука.

импорт Реацт, { усеСтате, усеМемо } из 'реацт';
извоз подразумеване функције Апп() {
цонст [цолор1, сетЦолор1] = усеСтате("блуе");
цонст [цолор2, сетЦолор2] = усеСтате("зелено");
цонст тогглеЦолор1 = () => {
вратити боју1 "плаво"? сетЦолор1("црвено"): сетЦолор1("плаво");
};
цонст тогглеЦолор2 = () => {
боја2 "зелена"? сетЦолор2("наранџаста"): сетЦолор2("зелено");
};
цонст дисплаиЦолор = () => {
вар сада = нови датум().гетТиме();
вхиле (нев Дате().гетТиме() вратити боју1 "плаво"? "кул": "вруће";
};
повратак (


Боја текста 1: {цолор1}

То је боја {дисплаиЦолор()}

Пребаци боју
Боја текста 2: {цолор2}

Пребаци боју



);
}

Када кликнете на тогглеБуттон1, требало би да приметите мало кашњење док се стање мења. Имајте на уму да постоји и кашњење када кликнете на тогглеБуттон2. Али то не би требало да се деси, пошто се пауза од једне секунде дешава у дисплаиЦолор. На овој страници, дугмад би требало да буду у стању да делују независно. Да бисте то постигли, можете користити усеМемо кука.

Морате умотати дисплаиЦолор функција у усеМемо закачити и проћи боја1 у низу зависности.

цонст дисплаиЦолор = усеМемо(() => {
вар сада = нови датум().гетТиме();
вхиле (нев Дате().гетТиме() вратити боју1 "плаво"? "кул": "вруће";
}, [боја1]);

Тхе усеМемо кука узима функцију и зависности као параметре. Тхе усеМемо кука ће се приказати само када се промени једна од његових зависности. Корисно је у ситуацијама када морате да преузимате из АПИ-ја.

Шта даље након учења кукица

Хоокс су веома моћна карактеристика и обично се користе у Реацт пројектима. Они пружају велики потенцијал за оптимизацију. Можете вежбати куке тако што ћете направити мале пројекте као што су формулари или бројачи сатова.

Постоје и друге напредне куке попут усеРедуцер, усеЛаиоутЕффецт, и усеДебугВалуе. Можете их научити позивајући се на званичну Реацт документацију.

Уннати Баманиа (Објављено 10 чланака)

Уннати је ентузијастичан фулл стацк програмер. Она воли да гради пројекте користећи различите програмске језике. У слободно време воли да свира гитару и ентузијаста је у кувању.

Више од Уннати Баманиа