Ukuba ungumphuhlisi weReact ongekafundi malunga neReact hook, ngoku ngumzuzu. Esi sithuba siya kudlula useEffect React Hook ngokweenkcukacha. Lihuku elilingana nemela yoMkhosi waseSwitzerland. Isombulula imiba eyahlukahlukeneyo, efana nendlela yokufumana idatha xa icandelo linyuka, indlela yokuqhuba ikhowudi xa i-state okanye iprop itshintsha, indlela yokumisela ixesha okanye i-intervals, njalo njalo.
I-useEffect isetyenziselwa kakhulu nantoni na ofuna ukuyenza "kwicandelo le-React elingabuyiyo i-JSX (naluphi na uhlobo lwesiphumo esisecaleni). Usenokuba neziphumo ezininzi zokusetyenziswa kwicandelo ngalinye.
Onke la mandla aza ngexabiso: ngaphandle kokuba uyayiqonda indlela asebenza ngayo, isenokubhida. Kule post, siza kujonga iindidi zemizekelo ukuze ubambe imodeli yengqikelelo kwaye uyisebenzise kweyakho ikhowudi.
Ukusabela Hooks – Yintoni ezama ukuyisombulula?
Iihuku zaziswa okokuqala kwiReact version 16.8 kwaye ngoku zisetyenziswa ziiprojekthi ezininzi zeReact. Iihuka zoyisa ingxaki yokuphindaphinda ikhowudi phakathi kwamacandelo. Zibhalwe ngaphandle kokusetyenziswa kweeklasi. Oku akuthethi ukuba i-React iyazishiya iiklasi; amagwegwe yindlela nje engenye.
I-React ikuvumela ukuba wenze izinto ezinobunkunkqele ngokukhawuleza ezinengqiqo ecacileyo. Kunzima ukwahlula la macandelo kuba iklasi ixhomekeke kwiiNdlela zokuPhepha koBomi. Apha kulapho iReact Hooks ingena khona.
Bakuvumela ukuba wahlule icandelo libe yimisebenzi emincinci. Esikhundleni sokwahlula ikhowudi ibe ngamaqhekeza amancinci ngokusekelwe kwiindlela ze-Lifecycle, unokucwangcisa kwaye uhlukanise ikhowudi kwiiyunithi ezincinci ngokuxhomekeke ekusebenzeni.
Yintoni useEffect Hook?
Iihuka yimisebenzi ekuvumela ukuba ufikelele kurhulumente kunye nezinye izakhono zokusabela ngaphandle kokubhala iiklasi ze-ES6. I-react hook API inekhonkco ebizwa ngokuba yi-useEffect. Ukuba uqhelene nemijikelo yobomi esabelayo, i-useEffect hook iyafana ne icandeloDidMount, icandeloDidUpdate, yaye icandeloWillUnmount iindlela zomjikelo wobomi zidityanisiwe.
Ngokwamaxwebhu eReact Hooks, yadalelwa ukusombulula eminye imiba kunye neendlela zomjikelo wobomi beqela le-ES6.
Syntax
Ingxoxo yokuqala ngumsebenzi wokufowuna, owenziwa ngokungagqibekanga emva konikezelo ngalunye. Eyesibini iparameter luluhlu olukhethiweyo lokuxhomekeka oluyalela iHook ukuba ifowunelwe kuphela ukuba imeko ekujoliswe kuyo iyatshintsha.
I-Hook ithelekisa ukuxhomekeka kwembali kunye nelizwe langoku. Ukuba amaxabiso amabini awahambelani, iHook itsalela umnxeba kwakhona okhankanywe kwiparameter yokuqala. Ukuxhomekeka kuluhlu luguqula indlela eqhelekileyo yokuziphatha yokufowunelwa kwaye iqinisekisa ukuba iHook iyawahoya onke amanye amalungu akwicandelo lomda.
Ukusetyenziswa okusisiseko
Ukugcina umyalezo, ndisebenzisa iReact useState kwisampulu yekhowudi engentla. Emva koko, ndithatha umyalezo wam oguquguqukayo kwaye ndiwuprinte kwiscreen. Nangona kunjalo, ngoku ndifuna ukusebenzisa iEffect ukulungisa umyalezo okwesibini emva kokuba icandelo linyusiwe.
Ndifake isiphumo sam emva komgca we-useState emva kokungenisa useEffect kwisakhelo seReact. Eyokuqala iparameter ukusetyenziswaEffect ngumsebenzi. Xa lo msebenzi wokuphatha uphunyeziwe, uya kukhathalela naziphi na iziphumo ebezingalindelekanga ozinikezelayo. Umsebenzi ngumsebenzi wokufowuna obizwa xa kusenzeka enye yeziganeko zobomi bomjikelo wecandelo le-React.
Uyisebenzisa nini?
I hook useEffect inokuba luncedo kwiimeko ezahlukeneyo. Oku kulandelayo zezona zibalulekileyo:
- Singatshintsha le parameter kwicala lomxhasi xa sinqwenela ukulanda idatha ngokuxhomekeke kwimpikiswano enikeziweyo. Iya kukhunjulwa emva kokuba iparameter ihlaziywe ngedatha entsha.
- Ukuba sifuna ukubuyisela idatha kwi-API endpoint kwaye siyibonise kwicala lomxhasi. Xa icandelo lethu linikezela, umsebenzi okanye isibambi esinikezelwe kwi-useEffect hook iphunyeziwe, kunye nedatha kumacandelo amacandelo ayafunyanwa. Ezi meko ke ziye ziqeshwe kujongano lomsebenzisi amacandelo.
- Xa icandelo lakho lithembele kwidatha evela kwihlabathi langaphandle kwaye asikwazi ukuqinisekisa ukuba idatha iya kufika, kufuneka sisebenziseEffect (mhlawumbi iseva isezantsi phaya). Kunokuba ulahle iingxaki kunye nokuthintela amanye amacandelo ukuba angabonakali, uwabeke kwi-hook ye-useEffect.
Sebenzisa iimeko
Ukuba icandelo linikezela kwakhona emva kokubaleka kokuqala, aliyi kuphunyezwa.
Nanini na xa icandelo linikezela okanye linikezela kwakhona, kufuneka lisoloko liphunyezwa.
Ngokungagqibekanga, inkqubo isebenza kanye kuphela. Emva koko, ukuba amaxabiso eprop ayatshintsha, sebenzisa:
Ngemisebenzi engahambelaniyo, soloko usebenzisa useEffect.
iibhloko zekhowudi zokuSebenzisa ziziphawuli ezicacileyo zemisebenzi engahambelaniyo yabaphuhlisi osebenza nabo. Kuyenzeka ukwenza ikhowudi ye-asynchronous ngaphandle kokusebenzisa i-useEffect, kodwa oku akusiyo "indlela yokuPhendula," kwaye yonyusa zombini ubunzima kunye nomngcipheko weempazamo.
Ukusebenzisa useEffect endaweni yokubhala ikhowudi engavumelaniyo enokuthi imise i-UI yindlela eyaziwayo kuluntu lwe-React, ngakumbi indlela iqela le-React eliyakhile ngayo ukwenza i-side effect.
Enye inzuzo yokuyisebenzisa kukuba abaphuhlisi banokuphonononga ikhowudi kwaye kwangoko babone ikhowudi eqhutywa "ngaphandle kokuhamba kolawulo," ethi ibaluleke kuphela emva komjikelo wokuqala wokunikezela. Ngaphaya koko, iibhloko zikulungele ukutsalwa kwi-Hooks ezinokusetyenziswa kwakhona kunye nangaphezulu kwesemantic yesiko.
Umzekelo
Usebenzisa ikhowudi ye useEffect, yongeza inani ngesekhondi.
isiphelo
Ukuqonda imigaqo yoyilo olusisiseko kunye nezenzo ezilungileyo ze-useEffect Hook, ngokombono wam, sikhono esibalulekileyo sokufunda ukuba ufuna ukuba ngumphuhlisi we-React olandelayo.
Ukushwankathela, i-useEffect Hook ifumana umsebenzi obandakanya isinyanzeliso, esinokuba nesiphumo sokuqiqa okupheleleyo. Uluhlu lokuxhomekeka, oluyiparameter yesibini, lunokusetyenziswa ukuphembelela ukuphunyezwa. Ngelixa ujongene nayo, kuyafuneka ukuba ubhale ikhowudi yokucoca usebenzisa umsebenzi wokubuyisela.
Sazise kwizimvo ukuba inqaku beliluncedo.
Shiya iMpendulo