Ако сте нови у Реацт-у, можда се питате шта су Реацт Хоокс и када би требало да их користите. Реацт је представио само куке у свом издању 16.8, али су брзо постале суштинска карактеристика библиотеке.
Сазнајте све о основама Реацт Хоокс-а и откријте неке најбоље праксе за њихово коришћење у вашим Реацт апликацијама.
Шта су Реацт Хоокс?
Реацт Хоокс вам омогућава да користите стање и друге Реацт функције без писања додатног кода. Куке су одличан начин да учините свој код читљивијим и лакшим за одржавање.
Има их неколико различите куке у Реацт-у, али најчешће коришћени су усеСтате и усеЕффецт. УсеСтате кука вам омогућава да додате стање вашим компонентама. Ово је корисно за ствари попут праћења уноса корисника или промена обрасца. УсеЕффецт кука вам омогућава да покренете функцију кад год се компонента рендерује. Ово је корисно за ствари попут преузимања података из АПИ-ја или подешавања претплате.
Када треба да користите Реацт Хоокс?
Требало би да користите Реацт Хоокс кад год желите да додате додатну функционалност компоненти. На пример, ако треба да пратите уносе корисника, користили бисте усеСтате куку. Ако треба да преузмете податке из АПИ-ја, користили бисте усеЕффецт куку. Можете такође
креирајте прилагођене куке за АПИ позиве.Ако сте тек почели да користите Реацт, можда још нећете морати да користите Хоокс. Али док правите сложеније апликације, открићете да су куке одличан начин да додате додатну функционалност вашим компонентама.
Најбоље праксе са Реацт кукицама
Сада када знате шта су Реацт Хоокс и када да их користите, хајде да причамо о неким најбољим праксама.
1. Само позивне куке из Реацт функција
Реацт Хоокс би требало да позивате само из Реацт функција. Ако покушате да позовете реагне куке из компоненте класе, добићете грешку.
То је зато што Реацт Хоок можете позвати само из Реацт функције. Реацт функције су компоненте које декларишете помоћу кључне речи функције.
Ево примера компоненте функције Реацт:
увоз Реагујте, { усеСтате } из 'реаговати';функцијаАпликација() {
конст [цоунт, сетЦоунт] = усеСтате(0);
повратак (
<див>
<стр>{цоунт}</п>
<дугме онЦлицк={() => сетЦоунт (број + 1)}>
Кликни ме
</button>
</div>
);
}
А ево примера компоненте класе:
увоз Реагујте, { Компонента } из 'реаговати';класаАпликацијапротежеСаставни део{
стање = {
број: 0
};
дати, пружити() {
повратак (
<див>
<стр>{тхис.стате.цоунт}</п>
<дугме онЦлицк={() => тхис.сетСтате({ цоунт: тхис.стате.цоунт + 1 })}>
Кликни ме
</button>
</div>
);
}
}
Први пример декларише компоненту апликације користећи кључну реч функције, док други користи кључну реч цласс.
2. Користите само једну усеЕффецт Хоок
Ако користите усеЕффецт куку, требало би да користите само једну по компоненти. То је зато што се усеЕффецт покреће кад год се компонента рендерује.
Ако имате више усеЕффецт кукица, све ће се покренути кад год се компонента рендерује. Ово може довести до неочекиваног понашања и проблема са перформансама. У доњем примеру, оба усеЕффецта ће се покренути кад год се компонента апликације прикаже.
увоз Реагујте, { усеСтате, усеЕффецт } из 'реаговати';функцијаАпликација() {
конст [цоунт, сетЦоунт] = усеСтате(0);усеЕффецт(() => {
цонсоле.лог('Ово ће се покренути кад год се компонента апликације прикаже!');
}, []);усеЕффецт(() => {
цонсоле.лог('Ово ће се такође покренути кад год се компонента апликације рендерује!');
}, []);
повратак (
<див>
<стр>{цоунт}</п>
<дугме онЦлицк={() => сетЦоунт (број + 1)}>
Кликни ме
</button>
</div>
);
}
Уместо да користите више усеЕффецт кука, можете користити једну усеЕффецт куку и ставити сав свој код у њу. У следећем примеру, само једна усеЕффецт кука ће се покренути кад год се компонента апликације рендерује.
увоз Реагујте, { усеСтате, усеЕффецт } из 'реаговати';функцијаАпликација() {
конст [цоунт, сетЦоунт] = усеСтате(0);усеЕффецт(() => {
цонсоле.лог('Ово ће се покренути кад год се компонента апликације прикаже!');
цонсоле.лог('Ово ће се такође покренути кад год се компонента апликације рендерује!');
}, []);
повратак (
<див>
<стр>{цоунт}</п>
<дугме онЦлицк={() => сетЦоунт (број + 1)}>
Кликни ме
</button>
</div>
);
}
То значи да можете позвати Реацт Хоокс само из првог примера. Ако покушате да позовете Реацт Хоокс из другог примера, добићете грешку.
3. Користите куке на највишем нивоу
Једна од најбољих пракси са Реацт Хоокс-има је да их користите на највишем нивоу. Требало би да избегавате коришћење кукица унутар петљи, услова или угнежђених функција. На пример, ако користитеСтате унутар фор петље, сваки пут када се петља покрене, Реацт ће креирати нову променљиву стања. Ово може довести до неочекиваног понашања.
увоз Реагујте, { усеСтате } из 'реаговати';функцијаАпликација() {
за (дозволити и = 0; и < 10; и++) {
// Не ради ово!
конст [цоунт, сетЦоунт] = усеСтате(0);
}
повратак (
<див>
<стр>{цоунт}</п>
<дугме онЦлицк={() => сетЦоунт (број + 1)}>
Кликни ме
</button>
</div>
);
}
У горњем примеру, компонента апликације ће увек приказати бројање и дугме само из последње итерације петље. То је зато што Реацт ажурира само променљиву стања од последње итерације.
Уместо да користитеСтате унутар петље, можете декларисати променљиву стања изван петље. На овај начин, Реацт ће креирати само једну променљиву стања и ажурирати је у складу са тим.
увоз Реагујте, { усеСтате } из 'реаговати';функцијаАпликација() {
// Ово је исправан начин да користите усеСтате унутар петље
конст [цоунт, сетЦоунт] = усеСтате(0);за (дозволити и = 0; и < 10; и++) {
// ...
}
повратак (
<див>
<стр>{цоунт}</п>
<дугме онЦлицк={() => сетЦоунт (број + 1)}>
Кликни ме
</button>
</div>
);
}
4. Немојте претерано користити куке
Реацт Хоокс су моћан алат, али треба избегавати њихову претерану употребу. Ако откријете да користите више Хоокова у свакој компоненти, можда их превише користите.
Реацт Хоокс су најкориснији када треба да делите стање између више компоненти. Избегавајте коришћење непотребних кукица јер оне могу отежати читање вашег кода и могу утицати на перформансе ако се прекомерно користе.
Додајте више функционалности користећи Реацт 18 куке
Са издавањем Реацт 18, доступне су нове куке. Свака кука је специфична за одређену Реацт функцију. Можете пронаћи листу свих доступних кукица на Реацт веб локацији. Али најчешће коришћене куке су и даље усеСтате и усеЕффецт.
