Ef þú ert React verktaki sem hefur ekki enn lært um React króka, þá er þetta augnablikið. Þessi færsla mun fara ítarlega í gegnum useEffect React Hook. Það er krókaígildi svissneskra herhnífs. Það leysir margvísleg vandamál, eins og hvernig á að fá gögn þegar íhlutur festist, hvernig á að keyra kóða þegar ástand eða stoð breytist, hvernig á að setja upp tímamæla eða millibil, og svo framvegis.
UseEffect er notað fyrir nokkurn veginn allt sem þú vilt „gera“ í React íhlut sem er ekki að skila JSX (hvers konar aukaverkun). Þú gætir líka haft nokkur useEffects fyrir hvern íhlut.
Allt þetta vald kostar sitt: nema þú skiljir hvernig það virkar getur það verið ruglingslegt. Í þessari færslu munum við skoða margvísleg dæmi svo þú getir skilið hugmyndalíkanið og beitt því á þinn eigin kóða.
React Hooks — Hvað er verið að reyna að leysa?
Krókar voru fyrst kynntir í React útgáfu 16.8 og eru nú notaðir af mörgum React verkefnum. Hooks sigrar vandamálið við endurtekningu kóða milli íhluta. Þau eru skrifuð án þess að nota bekki. Þetta þýðir ekki að React sé að yfirgefa flokka; krókar eru einfaldlega önnur aðferð.
React gerir þér kleift að búa fljótt til háþróaða íhluti með staðbundinni rökfræði. Það er erfitt að aðskilja þessa þætti þar sem bekkurinn byggir á React Lifecycle Methods. Þetta er þar sem React Hooks kemur inn.
Þeir leyfa þér að skipta íhlut í smærri aðgerðir. Í stað þess að skipta kóða í smærri stykki byggt á lífsferilsaðferðum, geturðu nú raðað og aðskilið kóða í smærri einingar eftir virkni.
Hvað er useEffect Hook?
Krókar eru aðgerðir sem leyfa þér að fá aðgang að ástandi og öðrum viðbragðsmöguleikum án þess að þurfa að skrifa ES6 flokka. React hooks API er með krók sem heitir useEffect. Ef þú ert kunnugur viðbragðslífsferlum er useEffect krókurinn sá sami og componentDidMount, componentDidUpdateog componentWillUnmount lífsferilsaðferðir sameinaðar.
Samkvæmt React Hooks skjölunum var það búið til til að leysa sum vandamálin með lífsferilsaðferðum ES6 flokks íhluta.
Setningafræði
Fyrstu rökin eru afturhringingaraðgerð, sem er sjálfkrafa keyrð eftir hverja myndgerð. Önnur færibreytan er valfrjálst Dependency fylki sem gefur króknum fyrirmæli um að hringja aðeins aftur ef markástandið breytist.
The Hook ber saman sögulegt og núverandi ástand hvers og eins. Ef gildin tvö passa ekki saman kallar krókurinn á svarhringingu sem tilgreind er í fyrstu færibreytunni. Ósjálfstæðisfylki breyta venjulegri hringingarhegðun og tryggja að krókurinn hunsi alla aðra íhluti í umfangi íhluta.
Grunnnotkun
Til að vista skilaboð er ég að nota React useState í kóðadæminu hér að ofan. Eftir það tek ég skilaboðastöðubreytuna mína og prenta hana á skjáinn. Hins vegar vil ég nú notaEffect til að breyta skilaboðunum sekúndu eftir að íhluturinn hefur verið settur upp.
Ég hef sett áhrifin mín á bak við useState línuna eftir innflutning useEffect úr React ramma. Fyrsta færibreytan til að notaEffect er fall. Þegar þessi aðgerðastjórnun er keyrð mun hann sjá um allar aukaverkanir sem þú gefur upp. Aðgerðin er afturhringingaraðgerð sem er kölluð þegar einn af React íhlutanum lífsferilsviðburðum á sér stað.
Hvenær á að nota það?
UseEffect krókurinn getur verið gagnlegur í ýmsum aðstæðum. Eftirfarandi skipta mestu máli:
- Við getum breytt þessari færibreytu frá hlið viðskiptavinarins þegar við viljum sækja gögn eftir því hvaða rökum er til staðar. Það verður afturkallað eftir að færibreytan hefur verið uppfærð með nýjum gögnum.
- Ef við viljum sækja gögn frá API endapunkti og sýna þau á biðlarahlið. Þegar íhluturinn okkar er birtur er aðgerðin eða meðhöndlunin sem gefin er useEffect króknum keyrð og gögn í íhlutastöðunum eru sótt. Þessar stöður eru síðan notaðar í notendaviðmótshlutum.
- Þegar íhluturinn þinn treystir á gögn frá umheiminum og við getum ekki tryggt að gögn berist ættum við að notaEffect (kannski er þjónninn þarna niðri). Í stað þess að henda vandamálum og koma í veg fyrir að aðrir íhlutir séu birtir skaltu setja þá í useEffect krókinn.
Nota tilfelli
Ef íhluturinn endurgerist eftir fyrstu keyrslu mun hann ekki keyra.
Alltaf þegar íhlutur endurbirtir eða endurgerist, ætti hann alltaf að vera keyrður.
Sjálfgefið er að forritið keyrir aðeins einu sinni. Síðan, ef stuðgildin breytast, keyrðu:
Notaðu alltaf useEffect fyrir ósamstilltar aðgerðir.
useEffect kóða blokkir eru augljós merki um ósamstillt störf fyrir aðra þróunaraðila þína. Það er hægt að búa til ósamstilltan kóða án þess að nota useEffect, en þetta er ekki „React aðferðin“ og hún eykur bæði flækjuna og hættuna á mistökum.
Að nota useEffect í stað þess að skrifa ósamstilltan kóða sem gæti stöðvað notendaviðmótið er vel þekkt tækni í React samfélaginu, sérstaklega hvernig React teymið hefur byggt það upp til að framkvæma aukaverkun.
Annar kostur við að nota það er að verktaki geta einfaldlega skoðað kóðann og strax greint kóða sem er keyrður „utan stjórnflæðisins,“ sem verður mikilvægt aðeins eftir fyrstu flutningslotuna. Ennfremur eru kubbarnir hentugir til að draga út í margnota og jafnvel merkingarkenndari sérsniðna króka.
Dæmi
Notaðu useEffect kóðann til að hækka tölu á sekúndu.
Niðurstaða
Að skilja undirliggjandi hönnunarreglur og bestu starfshætti useEffect Hook, að mínu mati, er mikilvæg kunnátta til að læra ef þú vilt verða React verktaki á næsta stigi.
Til að draga saman, useEffect Hook fær aðgerð sem inniheldur nauðsynlega, hugsanlega áhrifa fulla rökfræði. Ósjálfstæðisfylkingin, sem er önnur færibreytan, er hægt að nota til að hafa áhrif á framkvæmdina. Meðan á því stendur er líka nauðsynlegt að skrifa hreinsunarkóða með því að nota afturfallið.
Láttu okkur vita í athugasemdunum ef greinin var gagnleg.
Skildu eftir skilaboð