React-en garatzaile bat bazara, oraindik React-en kakoei buruz ikasi ez baduzu, orain da momentua. Argitalpen hau useEffect React Hook-en bidez egingo da xehetasunez. Suitzako aizto baten kako baliokidea da. Hainbat arazo konpontzen ditu, esate baterako, nola lortu datuak osagai bat muntatzen denean, nola exekutatu kodea egoera edo atrezzo bat aldatzen denean, nola konfiguratu tenporizadoreak edo tarteak, etab.
UseEffect JSX itzultzen ez duen React osagai batean "egin" nahi duzun edozertarako erabiltzen da (edozein albo-efektu mota). Hainbat erabilera-Efektu ere izan ditzakezu osagai bakoitzeko.
Botere horrek guztiak kostu bat du: nola funtzionatzen duen ulertzen ez baduzu, nahasgarria izan daiteke. Argitalpen honetan, hainbat adibide ikusiko ditugu, eredu kontzeptuala ulertu eta zure kodeari aplikatzeko.
Erreakzionatu Hooks – Zer konpontzen saiatzen ari da?
Hooks React 16.8 bertsioan sartu ziren eta orain React proiektu askok erabiltzen dituzte. Hooks-ek osagaien arteko kodea errepikatzearen arazoa gainditzen du. Klaserik erabili gabe idazten dira. Horrek ez du esan nahi React klaseak alde batera uzten ari denik; kakoak metodo alternatibo bat besterik ez dira.
React-ek osagai sofistikatuak azkar sortzeko aukera ematen dizu egoera logika batekin. Zaila da osagai hauek bereiztea, klasea React Lifecycle Metodoetan oinarritzen baita. Hemen sartzen dira React Hooks.
Osagai bat funtzio txikiagotan banatzeko aukera ematen dute. Bizitza-zikloaren metodoetan oinarritutako kodea zati txikiagoetan banatu beharrean, orain, funtzionalitatearen arabera, kodea unitate txikiagoetan antolatu eta bereiz dezakezu.
Zer da useEffect Hook?
Hooks egoera eta beste erreakzio gaitasun batzuk atzitzeko aukera ematen duten funtzioak dira, ES6 klaseak idatzi beharrik gabe. react hooks APIak useEffect izeneko amua du. Erreakzioaren bizi-zikloak ezagutzen badituzu, useEffect amua bera da componentDidMount, componentDidUpdate, eta componentWillUnmount bizi-zikloko metodoak konbinatuta.
React Hooks dokumentazioaren arabera, ES6 klaseko osagaien bizi-zikloko metodoen arazo batzuk konpontzeko sortu zen.
Sintaxia
Lehen argumentua dei-atzerako funtzioa da, errendatze bakoitzaren ondoren lehenespenez exekutatzen dena. Bigarren parametroa aukerako Dependency array bat da, eta Hook-ari dei-itzultzeko agindua ematen dio xede-egoera aldatzen bada soilik.
Hook-ek mendekotasun bakoitzaren egoera historikoa eta egungo egoera alderatzen ditu. Bi balioak bat ez badatoz, Hook-ek lehen parametroan zehaztutako deia deitzen du. Mendekotasun-matrizeek dei-itzulera ohiko portaera aldatzen dute eta Hook-ek osagaien esparruko gainerako osagai guztiak alde batera uzten dituela bermatzen dute.
Oinarrizko erabilera
Mezu bat gordetzeko, React useState erabiltzen ari naiz goiko kodearen adibidean. Horren ondoren, nire mezuaren egoera aldagaia hartu eta pantailan inprimatzen dut. Hala ere, orain Efektua erabili nahi dut osagaia muntatu ondoren mezua aldatzeko.
UseState lerroaren atzean nire efektua txertatu dut React esparrutik useEffect inportatu ondoren. Erabili beharreko lehen parametroa funtzio bat da. Funtzio-kudeatzailea exekutatzen denean, ematen dituzun albo-ondorioez arduratuko da. Funtzioa React osagaiaren bizi-zikloko gertakarietako bat gertatzen denean deitzen den itzulera-funtzioa da.
Noiz erabili?
useEffect kakoa erabilgarria izan daiteke hainbat egoeratan. Honako hauek dira erabakigarrienak:
- Parametro hau bezeroaren aldetik alda dezakegu datuak eskuratu nahi ditugunean emandako argumentu baten arabera. Parametroa datu berriekin eguneratu ondoren gogoratuko da.
- API amaierako puntu batetik datuak berreskuratu eta bezeroaren aldean bistaratu nahi baditugu. Gure osagaia errendatzen denean, useEffect amuari emandako funtzioa edo kudeatzailea exekutatzen da eta osagaien egoeretako datuak berreskuratzen dira. Egoera hauek erabiltzailearen interfazearen osagaietan erabiltzen dira.
- Zure osagaiak kanpoko munduko datuetan oinarritzen direnean eta datuak iritsiko direnik ziurtatu ezin dugunean, Efektua erabili beharko genuke (agian zerbitzaria hor dago). Arazoak bota eta beste osagai batzuk bistaratzea eragotzi beharrean, jarri useEffect kakoan.
Erabilera kasuak
Lehen exekuzioaren ondoren osagaia berriro errendatzen bada, ez da exekutatuko.
Osagai bat errendatzen edo berriro errendatzen den bakoitzean, beti exekutatu behar da.
Lehenespenez, programa behin bakarrik exekutatzen da. Ondoren, prop balioak aldatzen badira, exekutatu:
Jarduera asinkronoetarako, erabili beti useEffect.
useEffect kode-blokeak lan asinkronoen marka nabariak dira zure garatzaileentzat. Posible da kode asinkronoa sortzea useEffect erabili gabe, baina hau ez da "React metodoa" eta konplexutasuna eta akatsak izateko arriskua areagotzen du.
UseEffect erabiltzea UI-a geldi dezakeen kode asinkronoa idatzi beharrean teknika ezaguna da React komunitatean, batez ere React taldeak bigarren mailako efektu bat egiteko eraiki duen modua.
Erabiltzearen beste abantaila bat garatzaileek kodea berrikusi eta "kontrol-fluxutik kanpo" exekutatzen den kodea berehala detektatu dezakete, eta hori garrantzitsua bihurtzen da lehen errendatze-zikloaren ondoren. Gainera, blokeak egokiak dira Hook pertsonalizatu berrerabilgarri eta are semantikoagoetan ateratzeko.
Adibide bat
useEffect kodea erabiliz, handitu zenbaki bat segundoko.
Ondorioa
UseEffect Hook-en azpiko diseinu-printzipioak eta praktika onak ulertzea, nire ustez, trebetasun kritikoa da React-en hurrengo mailako garatzaile bihurtu nahi baduzu ikasteko.
Laburbilduz, useEffect Hook-ek logika osoa ezinbestekoa eta efektua izan dezaketen funtzio bat jasotzen du. Mendekotasun-matrizea, hau da, bigarren parametroa, exekuzioan eragiteko erabil daiteke. Horren aurrean, garbiketa-kodea ere idatzi behar da itzuli funtzioa erabiliz.
Esan iezaguzu iruzkinetan artikulua lagungarria izan den.
Utzi erantzun bat