Kana iwe uri React developer uyo asati adzidza nezve React hooks, ino ndiyo nguva. Iyi positi ichapfuura nekushandisaEffect React Hook zvakadzama. Ndiyo hoko yakaenzana nebanga reSwiss Army. Inogadzirisa nyaya dzakasiyana-siyana, sekuti ungawana sei data kana chikamu chichikwira, maitiro ekumhanyisa kodhi kana nyika kana prop ichichinja, maitiro ekumisikidza nguva kana nguva, zvichingodaro.
A useEffect inoshandiswa kune yakanakisa chero chinhu chaunoda "kuita" muReact component isiri kudzorera JSX (chero mhando yedivi mhedzisiro). Iwe unogona zvakare kuve neakati wandei useEffects pachikamu.
Iri simba rese rinouya nemubhadharo: kunze kwekunge wanzwisisa kuti rinoshanda sei, zvinogona kunetsa. Mune ino post, isu tichatarisa akasiyana emienzaniso kuitira kuti iwe ugone kubata iyo yekufungidzira modhi uye kuishandisa kune yako kodhi.
React Hooks – Chii chiri kuedza kugadzirisa?
Hoko dzakatanga kuunzwa muReact vhezheni 16.8 uye dzava kushandiswa nemapurojekiti mazhinji eReact. Hooks inokunda dambudziko rekudzokorora kwekodhi pakati pezvikamu. Izvo zvakanyorwa pasina kushandisa makirasi. Izvi hazvireve kuti React iri kusiya makirasi; hoko ingori imwe nzira.
React inokutendera iwe kukurumidza kugadzira akaomesesa zvinhu zvine stateful logic. Zvakaoma kupatsanura zvinhu izvi sezvo kirasi ichivimba neReact Lifecycle Methods. Apa ndipo panopinda React Hooks.
Vanokubvumira kuti ugovane chikamu mumabasa maduku. Panzvimbo yekuparadzanisa kodhi kuita zvidimbu zvidiki zvinoenderana neLifecycle nzira, unogona ikozvino kuronga nekuparadzanisa kodhi muzvikamu zvidiki zvinoenderana nekushanda.
Chii chinonzi useEffect Hook?
Hooks mabasa anobvumidza iwe kuti uwane nyika uye mamwe maitiro ekuita pasina kunyora ES6 makirasi. Iyo react hooks API ine hoko inonzi useEffect. Kana iwe uchijairana nereact life cycles, iyo useEffect hook yakafanana neiyo compactionDidMount, compactionDidUpdate, uye complicationWillUnmount nzira dzehupenyu dzakasanganiswa.
Zvinoenderana neReact Hooks zvinyorwa, yakagadzirwa kugadzirisa zvimwe zvezvinhu neES6 kirasi chikamu chikamu chehupenyu kutenderera nzira.
Syntax
Nharo yekutanga ndeye callback function, iyo inoitwa nekusarudzika mushure meumwe neumwe kupa. Yechipiri parameter isarudzo yeDependency array iyo inoraira Hook kuti idzore kumashure chete kana iyo inotariswa nyika yachinja.
Iyo Hook inofananidza imwe neimwe inotsamira nhoroondo uye yazvino nyika. Kana iyo miviri miviri isingaenderane, Hook inodaidza callback inotsanangurwa mukutanga parameter. Dependency arrays inoshandura yakajairika callback maitiro uye inovimbisa kuti Hook inofuratira zvimwe zvese zvikamu muchikamu chechikamu.
Basic kushandiswa
Kuchengeta meseji, ndiri kushandisa React useState mune kodhi sampu iri pamusoro. Mushure meizvozvo, ini ndinotora meseji yangu mamiriro akasiyana uye ndoiprinta pachiratidziri. Nekudaro, ini zvino ndoda kushandisaEffect kugadzirisa meseji sekondi mushure mekunge chikamu chaiswa.
Ndakaisa maitiro angu kuseri kweuseState mutsara mushure mekutumira kunze useEffect kubva kuReact framework. Yekutanga parameter yekushandisaEffect ibasa. Kana ichi chibatiso chikaitwa, chinotarisira chero mhedzisiro yaunopa. Iro basa ibasa rekufona rinodaidzwa kana imwe yeReact component lifecycle zviitiko zvichiitika.
Nguva yekuishandisa?
Iyo useEffect hoko inogona kubatsira mune akasiyana mamiriro. Izvi zvinotevera zvinonyanya kukosha:
- Tinogona kushandura iyi parameter kubva kudivi remutengi kana isu tichishuvira kutora data zvichienderana nekupokana kwakapihwa. Ichayeukwa mushure mekunge parameter yagadziridzwa nedata nyowani.
- Kana isu tichida kudzoreredza data kubva kune API endpoint uye kuiratidza padivi remutengi. Kana chikamu chedu chikapa, basa kana chibatiso chakapihwa useEffect hook chinoitwa, uye data iri muchikamu chenyika inotorwa. Aya mastatus anobva ashandiswa muuser interface zvikamu.
- Kana chikamu chako chichivimba nedata kubva kunze kwenyika uye isu hatigone kuona kuti data ichasvika, isu tinofanirwa kushandisaEffect (pamwe sevha iri pasi ipapo). Pane kukanda matambudziko uye kudzivirira zvimwe zvikamu kubva pakuratidzwa, zviise mu useEffect hook.
Shandisa maitiro
Kana chikamu chikapazve mushure mekutanga kumhanya, hachizoite.
Pese kana chikamu chikapa kana kupazve, chinofanira kugara chichiitwa.
Nekusagadzikana, chirongwa chinongoshanda kamwe chete. Mushure meizvozvo, kana iyo prop kukosha ikachinja, mhanya:
Kune asynchronous zviitiko, gara uchishandisa useEffect.
shandisaEffect kodhi mabhuraki ari pachena mamaki easynchronous mabasa kune vamwe vako vanogadzira. Zvinogoneka kugadzira asynchronous kodhi pasina kushandisa UseEffect, asi iyi haisi iyo "React nzira," uye inowedzera zvese kuoma uye njodzi yekukanganisa.
Kushandisa useEffect pachinzvimbo chekunyora asynchronous kodhi inogona kumisa iyo UI inzira inozivikanwa kwazvo munharaunda yeReact, kunyanya nzira iyo timu yeReact yakavaka kuti iite mhedzisiro.
Imwe mukana wekuishandisa ndeyekuti vagadziri vanogona kungoongorora kodhi uye nekukasira vaona kodhi inoitiswa "kunze kwekuyerera kwekutonga," iyo inova yakakosha chete mushure mekutanga kupa kutenderera. Uyezve, mabhuraki akakodzera kudhirowa mune inogoneka uye yakatonyanya semantic tsika Hooks.
Muenzaniso
Uchishandisa useEffect kodhi, wedzera nhamba pasekondi.
mhedziso
Kunzwisisa ari pasi pemagadzirirwo misimboti uye akanakisa maitiro ekushandisaEffect Hook, mukuona kwangu, hunyanzvi hwakakosha kudzidza kana iwe uchida kuve unotevera-chikamu React developer.
Kupfupisa, iyo useEffect Hook inogamuchira basa rinosanganisira zvakakosha, zvinogona kuita zvizere pfungwa. Iyo yekutsamira array, inova yechipiri parameter, inogona kushandiswa kukanganisa kuuraya. Paunenge uchibata nazvo, zvinodikanwawo kunyora kodhi yekuchenesa uchishandisa basa rekudzoka.
Tizivise mumashoko kana chinyorwa chacho chaibatsira.
Leave a Reply