Ngati ndinu wopanga React yemwe simunaphunzirepo za React hooks, ino ndi nthawi. Cholembachi chidzadutsa useEffect React Hook mwatsatanetsatane. Ndi mbeza yofanana ndi mpeni waku Swiss Army. Imathetsa nkhani zosiyanasiyana, monga momwe mungapezere deta pamene chigawo chikukwera, momwe mungayendetsere kachidindo pamene dziko kapena prop ikusintha, momwe mungakhazikitsire nthawi kapena nthawi, ndi zina zotero.
UseEffect amagwiritsidwa ntchito pachilichonse chomwe mungafune "kuchita" mu gawo la React lomwe silikubweza JSX (mtundu uliwonse wa zotsatira). Mutha kukhalanso ndi UseEffects angapo pagawo lililonse.
Mphamvu zonsezi zimabwera pamtengo wake: pokhapokha mutamvetsetsa momwe zimagwirira ntchito, zitha kukhala zododometsa. Mu positi iyi, tiwona zitsanzo zingapo kuti muthe kumvetsetsa zachitsanzo ndikuchiyika pamakhodi anu.
Chitani ndi Hook - Kodi akuyesera kuthetsa chiyani?
Makoko adayambitsidwa koyamba mu React version 16.8 ndipo tsopano akugwiritsidwa ntchito ndi ma projekiti ambiri a React. Hooks amagonjetsa vuto la kubwereza kachidindo pakati pa zigawo. Amalembedwa popanda kugwiritsa ntchito makalasi. Izi sizikutanthauza kuti React ikusiya makalasi; mbedza ndi njira ina chabe.
React imakupatsani mwayi wopanga zida zapamwamba kwambiri zokhala ndi malingaliro apamwamba. Ndizovuta kusiyanitsa zigawozi chifukwa kalasi imadalira React Lifecycle Methods. Apa ndipamene React Hooks amabwera.
Iwo amakulolani kugawa chigawo chimodzi mu ntchito zing'onozing'ono. M'malo mogawa kachidindo m'zidutswa zing'onozing'ono kutengera njira za Lifecycle, mutha kukonza ndikugawa kachidindo mumagulu ang'onoang'ono kutengera magwiridwe antchito.
Kodi useEffect Hook ndi chiyani?
Hooks ndi ntchito zomwe zimakupatsani mwayi wofikira boma ndi zina zomwe mungachite popanda kulemba makalasi a ES6. The react hooks API ili ndi mbedza yotchedwa useEffect. Ngati mumadziwa ma react life cycle, useEffect hook ndi yofanana ndi gawoDidMount, componentDidUpdatendipo gawoWillUnmount njira zozungulira moyo pamodzi.
Malinga ndi zolemba za React Hooks, idapangidwa kuti ithetse zina mwazovuta ndi njira za ES6 kalasi gawo la moyo.
Syntax
Mtsutso woyamba ndi ntchito ya callback, yomwe imachitidwa mwachisawawa pambuyo popereka. Gawo lachiwiri ndilosankha la Dependency array lomwe limalangiza Hook kuti abwererenso pokhapokha ngati dziko lomwe mukufuna likusintha.
Hook imafanizira zomwe zimadalira mbiri yakale komanso zamakono. Ngati zikhalidwe ziwirizi sizikufanana, Hook imayitanitsa kuyimbanso komwe kumatchulidwa pagawo loyamba. Magulu odalira amasintha machitidwe obwerezabwereza ndikutsimikizira kuti Hook imanyalanyaza zigawo zina zonse zomwe zili mu gawoli.
Kugwiritsa ntchito koyambira
Kuti ndisunge uthenga, ndikugwiritsa ntchito React useState pachitsanzo cha code pamwambapa. Pambuyo pake, ndimatenga uthenga wanga wosintha ndikuusindikiza pazenera. Komabe, tsopano ndikufuna kugwiritsa ntchito Effect kuti ndisinthe uthengawo sekondi imodzi itatha kukwera.
Ndayika zotsatira zanga kuseri kwa mzere wa useState nditatha kuitanitsa useEffect kuchokera ku React framework. Gawo loyamba logwiritsa ntchitoEffect ndi ntchito. Pamene chogwirizira ichi chikuchitidwa, chidzasamalira zotsatira zilizonse zomwe mumapereka. Ntchitoyi ndi ntchito yobwereza yomwe imatchedwa pamene chimodzi mwa zochitika za React chigawo cha moyo chikuchitika.
Mungagwiritse ntchito liti?
Hook ya useEffect itha kukhala yothandiza munthawi zosiyanasiyana. Izi ndizofunika kwambiri:
- Titha kusintha gawoli kuchokera kumbali ya kasitomala tikafuna kutengera deta kutengera mkangano womwe waperekedwa. Idzakumbukiridwanso parameter ikasinthidwa ndi data yatsopano.
- Ngati tikufuna kupeza deta kuchokera kumapeto kwa API ndikuwonetsa kumbali ya kasitomala. Chigawo chathu chikapereka, ntchito kapena chogwirizira chomwe chimaperekedwa ku hook ya useEffect chimachitidwa, ndipo zomwe zili m'chigawocho zimatengedwa. Ma status awa amagwiritsidwa ntchito m'magawo ogwiritsira ntchito.
- Chigawo chanu chikadalira deta kuchokera kunja ndipo sitingathe kuonetsetsa kuti deta ifika, tiyenera kugwiritsa ntchitoEffect (mwinamwake seva ili pansi). M'malo moponya mavuto ndikuletsa kuti zida zina zisawonetsedwe, ikani mu mbedza ya useEffect.
Gwiritsani ntchito milandu
Ngati chigawocho chibwerezanso pambuyo poyendetsa koyamba, sichidzagwiranso.
Chigawo chilichonse chikapereka kapena kubwerezanso, chiyenera kuchitidwa nthawi zonse.
Mwachisawawa, pulogalamuyi imangoyenda kamodzi. Pambuyo pake, ngati ma prop asintha, yesani:
Pazinthu zosasinthika, gwiritsani ntchito UseEffect nthawi zonse.
UseEffect code blocks ndizizindikiro zodziwikiratu za ntchito zosasinthika kwa omwe akutukula anzanu. N'zotheka kupanga code asynchronous popanda kugwiritsa ntchito Effect, koma iyi si "React method," ndipo imawonjezera zovuta komanso chiopsezo cha zolakwika.
Kugwiritsa ntchito useEffect m'malo molemba ma code asynchronous omwe angaimitse UI ndi njira yodziwika bwino m'dera la React, makamaka momwe gulu la React limapangira kuti lichite nawo mbali.
Ubwino wina wogwiritsa ntchito ndikuti opanga amatha kungoyang'ana kachidindo ndikuwona nthawi yomweyo kachidindo yomwe imayendetsedwa "kunja kwa kayendetsedwe ka kayendetsedwe kake," komwe kumakhala kofunikira kokha pambuyo poyambira. Kuphatikiza apo, midadadayo ndi yoyenera kuchotsedwanso kukhala ma Hooks osinthika komanso ochulukirapo.
Chitsanzo
Pogwiritsa ntchito code ya useEffect, yonjezerani nambala pamphindikati.
Kutsiliza
Kumvetsetsa mfundo zamapangidwe ndi machitidwe abwino a useEffect Hook, m'malingaliro mwanga, ndi luso lofunika kwambiri kuti muphunzire ngati mukufuna kukhala wopanga mulingo wotsatira wa React.
Mwachidule, useEffect Hook imalandira ntchito yomwe imaphatikizapo zofunikira, zomwe zingakhudze malingaliro onse. Gulu lodalira, lomwe ndi gawo lachiwiri, lingagwiritsidwe ntchito kukhudza kuphedwa. Pamene mukuchita nazo, m'pofunikanso kulemba code yoyeretsa pogwiritsa ntchito ntchito yobwerera.
Tiuzeni mu ndemanga ngati nkhaniyi inali yothandiza.
Siyani Mumakonda