Os ydych chi'n ddatblygwr React nad yw wedi dysgu eto am fachau React, nawr yw'r foment. Bydd y swydd hon yn mynd trwy'r Hook React useEffect yn fanwl. Mae'n cyfateb i fachyn cyllell Byddin y Swistir. Mae'n datrys amrywiaeth o faterion, fel sut i gael data pan fydd cydran yn gosod, sut i redeg cod pan fydd cyflwr neu brop yn newid, sut i sefydlu amseryddion neu gyfyngau, ac ati.
Mae useEffect yn cael ei ddefnyddio ar gyfer bron unrhyw beth rydych chi am ei “wneud” mewn cydran React nad yw'n dychwelyd JSX (unrhyw fath o sgîl-effaith). Efallai y bydd gennych hefyd nifer o Effeithiau defnydd fesul cydran.
Mae cost i'r holl bŵer hwn: oni bai eich bod yn deall sut mae'n gweithio, gall fod yn ddryslyd. Yn y swydd hon, byddwn yn edrych ar amrywiaeth o enghreifftiau fel y gallwch chi ddeall y model cysyniadol a'i gymhwyso i'ch cod eich hun.
Bachau React – Beth mae’n ceisio’i ddatrys?
Cyflwynwyd bachau gyntaf yn fersiwn React 16.8 ac maent bellach yn cael eu defnyddio gan lawer o brosiectau React. Mae bachau yn goresgyn y broblem o ailadrodd cod rhwng cydrannau. Maent yn cael eu hysgrifennu heb ddefnyddio dosbarthiadau. Nid yw hyn yn awgrymu bod React yn cefnu ar ddosbarthiadau; dull amgen yn unig yw bachau.
Mae React yn caniatáu ichi greu cydrannau soffistigedig yn gyflym gyda rhesymeg gadarn. Mae'n anodd gwahanu'r cydrannau hyn gan fod y dosbarth yn dibynnu ar React Lifecycle Methods. Dyma lle mae React Hooks yn dod i mewn.
Maent yn caniatáu ichi rannu cydran yn swyddogaethau llai. Yn hytrach na rhannu cod yn ddarnau llai yn seiliedig ar ddulliau Cylch Bywyd, gallwch nawr drefnu a gwahanu cod yn unedau llai yn dibynnu ar ymarferoldeb.
Beth yw useEffect Hook?
Mae bachau yn swyddogaethau sy'n eich galluogi i gael mynediad at alluoedd adweithio cyflwr a galluoedd eraill heb orfod ysgrifennu dosbarthiadau ES6. Mae gan yr API bachau ymateb fachyn o'r enw useEffect. Os ydych chi'n gyfarwydd â chylchredau bywyd adweithio, mae'r bachyn useEffect yr un peth â'r cydranDidMount, cydranDidUpdate, a cydranWillUnmount dulliau cylch bywyd wedi'u cyfuno.
Yn ôl dogfennaeth React Hooks, fe'i crëwyd i ddatrys rhai o'r problemau gyda dulliau cylch bywyd cydrannau dosbarth ES6.
Cystrawen
Mae'r ddadl gyntaf yn swyddogaeth galw'n ôl, a weithredir yn ddiofyn ar ôl pob rendrad. Mae'r ail baramedr yn arae Dibyniaeth ddewisol sy'n cyfarwyddo'r Bachyn i alw'n ôl dim ond os yw'r cyflwr targed yn newid.
Mae'r Bachyn yn cymharu cyflwr hanesyddol a phresennol pob dibyniaeth. Os nad yw'r ddau werth yn cyfateb, mae'r Bachyn yn galw'r alwad yn ôl a nodir yn y paramedr cyntaf. Mae araeau dibyniaeth yn newid yr ymddygiad galw'n ôl arferol ac yn gwarantu bod y Hook yn anwybyddu'r holl gydrannau eraill yng nghwmpas y gydran.
Defnydd sylfaenol
I arbed neges, rwy'n defnyddio React useState yn y sampl cod uchod. Ar ôl hynny, rwy'n cymryd newidyn cyflwr fy neges a'i argraffu ar y sgrin. Fodd bynnag, rwyf nawr am ddefnyddioEffect i addasu'r neges eiliad ar ôl gosod y gydran.
Rwyf wedi mewnosod fy effaith y tu ôl i'r llinell useState ar ôl mewnforio useEffect o'r fframwaith React. Mae'r paramedr cyntaf i useEffect yn swyddogaeth. Pan fydd y triniwr swyddogaeth hwn yn cael ei weithredu, bydd yn gofalu am unrhyw sgîl-effeithiau a ddarperir gennych. Mae'r swyddogaeth yn swyddogaeth galw'n ôl a elwir pan fydd un o ddigwyddiadau cylch bywyd cydran React yn digwydd.
Pryd i'w ddefnyddio?
Gall y bachyn useEffect fod yn ddefnyddiol mewn amrywiaeth o sefyllfaoedd. Y canlynol yw'r rhai mwyaf hanfodol:
- Gallwn newid y paramedr hwn o ochr y cleient pan fyddwn yn dymuno nôl data yn dibynnu ar ddadl a gyflenwir. Bydd yn cael ei alw'n ôl ar ôl i'r paramedr gael ei ddiweddaru gyda data ffres.
- Os ydym am adfer data o bwynt terfyn API a'i arddangos ar ochr y cleient. Pan fydd ein cydran yn rendro, mae'r swyddogaeth neu'r triniwr a roddir i'r bachyn useEffect yn cael ei weithredu, ac mae data yn y cyflyrau cydrannol yn cael eu hadalw. Yna defnyddir y statws hwn mewn cydrannau rhyngwyneb defnyddiwr.
- Pan fydd eich cydran yn dibynnu ar ddata o'r byd y tu allan ac ni allwn sicrhau y bydd data'n cyrraedd, dylem ddefnyddioEffect (efallai bod y gweinydd i lawr yno). Yn hytrach na thaflu problemau ac atal cydrannau eraill rhag cael eu harddangos, rhowch nhw yn y bachyn useEffect.
Defnyddio achosion
Os bydd y gydran yn ail-rendro ar ôl y rhediad cyntaf, ni fydd yn gweithredu.
Pryd bynnag y bydd cydran yn rendro neu'n ail-rendro, dylid ei gweithredu bob amser.
Yn ddiofyn, dim ond unwaith y mae'r rhaglen yn rhedeg. Wedi hynny, os bydd gwerthoedd y prop yn newid, rhedwch:
Ar gyfer gweithgareddau asyncronaidd, defnyddiwch useEffect bob amser.
Mae blociau cod useEffect yn arwyddion amlwg o swyddi asyncronaidd ar gyfer eich cyd-ddatblygwyr. Mae'n bosibl creu cod asyncronig heb ddefnyddio useEffect, ond nid dyma'r “Dull React,” ac mae'n cynyddu cymhlethdod a'r risg o gamgymeriadau.
Mae defnyddio useEffect yn lle ysgrifennu cod asyncronig a allai atal yr UI yn dechneg adnabyddus yn y gymuned React, yn enwedig y ffordd y mae tîm React wedi'i adeiladu i berfformio sgîl-effaith.
Mantais arall o'i ddefnyddio yw y gall datblygwyr adolygu'r cod yn syml a chanfod cod sy'n cael ei redeg “y tu allan i'r llif rheoli” ar unwaith, sy'n dod yn bwysig dim ond ar ôl y cylch rendrad cyntaf. Ar ben hynny, mae'r blociau'n addas i'w hechdynnu i Bachau arferiad y gellir eu hailddefnyddio a hyd yn oed yn fwy semantig.
Enghraifft
Gan ddefnyddio'r cod useEffect, cynyddwch nifer yr eiliad.
Casgliad
Mae deall yr egwyddorion dylunio sylfaenol ac arferion gorau'r useEffect Hook, yn fy marn i, yn sgil hanfodol i'w ddysgu os ydych chi am ddod yn ddatblygwr React lefel nesaf.
I grynhoi, mae'r useEffect Hook yn derbyn swyddogaeth sy'n cynnwys rhesymeg hanfodol, a allai gael effaith lawn. Gellir defnyddio'r arae dibyniaeth, sef yr ail baramedr, i ddylanwadu ar y gweithrediad. Wrth ddelio ag ef, mae hefyd angen ysgrifennu cod glanhau gan ddefnyddio'r swyddogaeth dychwelyd.
Rhowch wybod i ni yn y sylwadau a oedd yr erthygl yn ddefnyddiol.
Gadael ymateb