Kung isa kang developer ng React na hindi pa natututo tungkol sa mga kawit ng React, ngayon na ang sandali. Ang post na ito ay dadaan sa useEffect React Hook nang detalyado. Ito ay katumbas ng kawit ng kutsilyo ng Swiss Army. Nilulutas nito ang iba't ibang isyu, tulad ng kung paano kumuha ng data kapag nag-mount ang isang bahagi, kung paano patakbuhin ang code kapag nagbago ang isang estado o prop, kung paano mag-set up ng mga timer o agwat, at iba pa.
Ang isang useEffect ay ginagamit para sa halos anumang bagay na gusto mong "gawin" sa isang React component na hindi nagbabalik ng JSX (anumang uri ng side effect). Maaari ka ring magkaroon ng ilang mga useEffect bawat bahagi.
Ang lahat ng kapangyarihang ito ay may halaga: maliban kung nauunawaan mo kung paano ito gumagana, maaaring nakakalito ito. Sa post na ito, titingnan namin ang iba't ibang mga halimbawa upang maunawaan mo ang modelong konseptwal at ilapat ito sa sarili mong code.
React Hooks – Ano ang sinusubukan nitong lutasin?
Ang Hooks ay unang ipinakilala sa React na bersyon 16.8 at ngayon ay ginagamit ng maraming proyekto ng React. Napagtagumpayan ng Hooks ang problema ng pag-uulit ng code sa pagitan ng mga bahagi. Ang mga ito ay isinulat nang hindi gumagamit ng mga klase. Hindi ito nagpapahiwatig na ang React ay umaabandona sa mga klase; Ang mga kawit ay isa lamang alternatibong pamamaraan.
Binibigyang-daan ka ng React na mabilis na lumikha ng mga sopistikadong bahagi na may stateful logic. Mahirap paghiwalayin ang mga bahaging ito dahil umaasa ang klase sa React Lifecycle Methods. Dito pumapasok ang React Hooks.
Pinapayagan ka nitong hatiin ang isang bahagi sa mas maliliit na function. Sa halip na hatiin ang code sa mas maliliit na piraso batay sa mga pamamaraan ng Lifecycle, maaari mo na ngayong ayusin at paghiwalayin ang code sa mas maliliit na unit depende sa functionality.
Ano ang useEffect Hook?
Ang mga hook ay mga function na nagbibigay-daan sa iyo na ma-access ang estado at iba pang mga kakayahan sa reaksyon nang hindi kinakailangang sumulat ng mga klase ng ES6. Ang react hooks API ay may hook na tinatawag na useEffect. Kung pamilyar ka sa mga react life cycle, ang useEffect hook ay kapareho ng sangkapDidMount, sangkapDidUpdate, at sangkapWillUnmount pinagsamang mga pamamaraan ng siklo ng buhay.
Ayon sa dokumentasyon ng React Hooks, nilikha ito upang malutas ang ilan sa mga isyu sa mga pamamaraan ng siklo ng buhay ng bahagi ng klase ng ES6.
palaugnayan
Ang unang argumento ay isang callback function, na isinasagawa bilang default pagkatapos ng bawat pag-render. Ang pangalawang parameter ay isang opsyonal na array ng Dependency na nagtuturo sa Hook na mag-callback lamang kung magbabago ang target na estado.
Inihahambing ng Hook ang makasaysayan at kasalukuyang estado ng bawat dependency. Kung hindi magkatugma ang dalawang value, ipapatawag ng Hook ang callback na tinukoy sa unang parameter. Binabago ng mga dependency array ang karaniwang pag-uugali ng callback at ginagarantiyahan na binabalewala ng Hook ang lahat ng iba pang bahagi sa saklaw ng bahagi.
Pangunahing paggamit
Para mag-save ng mensahe, gumagamit ako ng React useState sa sample ng code sa itaas. Pagkatapos nito, kinuha ko ang variable ng estado ng mensahe ko at i-print ito sa screen. Gayunpaman, gusto ko na ngayong gumamit ngEffect upang baguhin ang mensahe sa isang segundo pagkatapos na mai-mount ang bahagi.
Ipinasok ko ang aking epekto sa likod ng linya ng useState pagkatapos mag-import ng useEffect mula sa React framework. Ang unang parameter na gagamitinEffect ay isang function. Kapag ang handler ng function na ito ay naisakatuparan, ito ang bahala sa anumang side effect na iyong ibibigay. Ang function ay isang callback function na tinatawag kapag nangyari ang isa sa React component lifecycle event.
Kailan ito gagamitin?
Ang useEffect hook ay maaaring maging kapaki-pakinabang sa iba't ibang sitwasyon. Ang mga sumusunod ay ang pinakamahalaga:
- Maaari naming baguhin ang parameter na ito mula sa panig ng kliyente kapag gusto naming kumuha ng data depende sa isang ibinigay na argumento. Tatandaan ito pagkatapos ma-update ang parameter na may bagong data.
- Kung gusto naming kunin ang data mula sa isang API endpoint at ipakita ito sa client-side. Kapag nag-render ang aming component, ang function o handler na ibinigay sa useEffect hook ay isasagawa, at ang data sa mga component state ay kinukuha. Ang mga katayuang ito ay ginagamit sa mga bahagi ng user interface.
- Kapag umaasa ang iyong component sa data mula sa labas ng mundo at hindi namin matiyak na darating ang data, dapat naming gamitin angEffect (marahil ang server ay nasa ibaba). Sa halip na maghagis ng mga problema at pigilan ang ibang mga bahagi na ipakita, ilagay ang mga ito sa useEffect hook.
Paggamit ng mga kaso
Kung ang bahagi ay muling nagre-render pagkatapos ng unang pagtakbo, hindi ito isasagawa.
Sa tuwing nagre-render o nagre-render muli ang isang bahagi, dapat itong palaging isagawa.
Bilang default, isang beses lang tumatakbo ang program. Pagkatapos, kung magbabago ang mga halaga ng prop, patakbuhin ang:
Para sa mga asynchronous na aktibidad, palaging gumamit ng useEffect.
Ang mga bloke ng useEffect code ay malinaw na mga marker ng mga asynchronous na trabaho para sa iyong mga kapwa developer. Posibleng lumikha ng asynchronous na code nang hindi gumagamit ng useEffect, ngunit hindi ito ang "React method," at pinapataas nito ang pagiging kumplikado at ang panganib ng mga pagkakamali.
Ang paggamit ng useEffect sa halip na magsulat ng asynchronous na code na maaaring huminto sa UI ay isang kilalang diskarte sa komunidad ng React, lalo na ang paraan na binuo ito ng React team upang makagawa ng side effect.
Ang isa pang bentahe ng paggamit nito ay ang mga developer ay maaaring suriin lamang ang code at agad na makita ang code na pinapatakbo "sa labas ng kontrol na daloy," na nagiging mahalaga lamang pagkatapos ng unang ikot ng pag-render. Higit pa rito, ang mga bloke ay angkop para sa pagkuha sa magagamit muli at mas semantikong custom na Hooks.
Isang halimbawa
Gamit ang useEffect code, dagdagan ang isang numero sa bawat segundo.
Konklusyon
Ang pag-unawa sa pinagbabatayan na mga prinsipyo sa disenyo at pinakamahuhusay na kagawian ng useEffect Hook, sa aking pananaw, ay isang kritikal na kasanayang matututunan kung gusto mong maging isang susunod na antas na developer ng React.
Upang buod, ang useEffect Hook ay tumatanggap ng isang function na kinabibilangan ng kailangan, potensyal na epekto ng buong logic. Ang dependence array, na siyang pangalawang parameter, ay maaaring gamitin upang maimpluwensyahan ang execution. Habang nakikitungo dito, kinakailangan ding magsulat ng cleaning code gamit ang return function.
Ipaalam sa amin sa mga komento kung nakatulong ang artikulo.
Mag-iwan ng Sagot