Ако сте Реацт програмер који још није научио о Реацт кукицама, сада је тренутак. Овај пост ће детаљно проћи кроз усеЕффецт Реацт Хоок. То је удица еквивалентна швајцарском ножу. Решава низ проблема, на пример како да добијете податке када се компонента монтира, како да покрене код када се стање или пропс промени, како да подесите тајмере или интервале, итд.
УсеЕффецт се користи за скоро све што желите да „урадите“ у Реацт компоненти која не враћа ЈСКС (било који тип нуспојава). Такође можете имати неколико усеЕфеката по компоненти.
Сва ова моћ има цену: осим ако не разумете како функционише, може бити збуњујуће. У овом посту ћемо погледати разне примере како бисте могли да схватите концептуални модел и примените га на сопствени код.
Реацт Хоокс – Шта покушава да реши?
Хоокс су први пут представљени у Реацт верзији 16.8 и сада их користе многи Реацт пројекти. Хоокс превазилази проблем понављања кода између компоненти. Написане су без употребе класа. Ово не значи да Реацт напушта класе; куке су једноставно алтернативни метод.
Реацт вам омогућава да брзо креирате софистициране компоненте са логиком праћења стања. Тешко је раздвојити ове компоненте пошто се класа ослања на Реацт Лифецицле Метходс. Овде долазе Реацт Хоокс.
Они вам омогућавају да поделите компоненту на мање функције. Уместо поделе кода на мање делове на основу метода животног циклуса, сада можете да организујете и одвојите код у мање јединице у зависности од функционалности.
Шта је усеЕффецт Хоок?
Хоокс су функције које вам омогућавају да приступите стању и другим могућностима реаговања без потребе да пишете ЕС6 класе. Реацт хоокс АПИ има куку која се зове усеЕффецт. Ако сте упознати са животним циклусима реаговања, усеЕффецт кука је иста као и цомпонентДидМоунт, цомпонентДидУпдате, и цомпонентВиллУнмоунт комбиноване методе животног циклуса.
Према Реацт Хоокс документацији, креиран је да реши неке проблеме са методама животног циклуса компоненте ЕС6 класе.
синтакса
Први аргумент је функција повратног позива, која се подразумевано извршава након сваког рендеровања. Други параметар је опциони низ зависности који упућује закачицу да повратни позив само ако се промени циљно стање.
Хоок упоређује историјска и садашња стања сваке зависности. Ако се две вредности не поклапају, Хоок позива повратни позив наведен у првом параметру. Низови зависности мењају уобичајено понашање повратног позива и гарантују да кука игнорише све остале компоненте у опсегу компоненте.
Основна употреба
Да сачувам поруку, користим Реацт усеСтате у узорку кода изнад. Након тога, узимам променљиву стања своје поруке и штампам је на екрану. Међутим, сада желим да користим Еффецт да изменим поруку секунду након што је компонента монтирана.
Убацио сам свој ефекат иза линије усеСтате након увоза усеЕффецт-а из Реацт оквира. Први параметар за усеЕффецт је функција. Када се изврши овај обрађивач функције, он ће се побринути за све нежељене ефекте које пружите. Функција је функција повратног позива која се позива када се догоди један од догађаја животног циклуса компоненте Реацт.
Када га користити?
УсеЕффецт кука може бити корисна у различитим ситуацијама. Следеће су најважније:
- Можемо да променимо овај параметар са стране клијента када желимо да преузмемо податке у зависности од датог аргумента. Биће опозван након што се параметар ажурира новим подацима.
- Ако желимо да преузмемо податке са АПИ крајње тачке и прикажемо их на страни клијента. Када се наша компонента рендерује, извршава се функција или руковалац дат закачици усеЕффецт, а подаци у стањима компоненте се преузимају. Ови статуси се затим користе у компонентама корисничког интерфејса.
- Када се ваша компонента ослања на податке из спољашњег света и не можемо да обезбедимо да ће подаци стићи, требало би да користимо Еффецт (можда је сервер тамо доле). Уместо да изазивате проблеме и спречите приказивање других компоненти, поставите их у усеЕффецт куку.
Користите случајеви
Ако се компонента поново прикаже након првог покретања, неће се извршити.
Кад год се компонента рендерује или поново приказује, увек је треба извршити.
Подразумевано, програм се покреће само једном. Након тога, ако се вредности проп-а промене, покрените:
За асинхроне активности увек користите усеЕффецт.
усеЕффецт блокови кода су очигледни маркери асинхроних послова за ваше колеге програмере. Могуће је креирати асинхрони код без коришћења усеЕффецт-а, али ово није „реаговање метода“ и повећава и сложеност и ризик од грешака.
Коришћење усеЕффецт-а уместо писања асинхроног кода који може да заустави кориснички интерфејс је добро позната техника у Реацт заједници, посебно начин на који ју је Реацт тим изградио да би извршио споредни ефекат.
Још једна предност његовог коришћења је та што програмери могу једноставно да прегледају код и одмах открију код који се покреће „изван тока контроле“, што постаје важно тек након првог циклуса рендеровања. Штавише, блокови су погодни за екстракцију у вишекратне и још више семантичке прилагођене куке.
Пример
Користећи усеЕффецт код, повећајте број у секунди.
Zakljucak
Разумевање основних принципа дизајна и најбољих пракси усеЕффецт Хоок-а, по мом мишљењу, је кључна вештина коју треба научити ако желите да постанете Реацт програмер следећег нивоа.
Да резимирамо, усеЕффецт Хоок добија функцију која укључује императивну, потенцијално ефектну пуну логику. Низ зависности, који је други параметар, може се користити да утиче на извршење. Док се бавите тиме, такође је потребно написати код за чишћење помоћу функције ретурн.
Обавестите нас у коментарима да ли је чланак био од помоћи.
Ostavite komentar