Kui olete Reacti arendaja, kes pole veel Reacti konksudega tutvunud, on nüüd käes hetk. See postitus läbib üksikasjalikult useEffect React Hooki. See on Šveitsi armee noa konksu ekvivalent. See lahendab mitmesuguseid probleeme, nagu näiteks andmete hankimine komponendi ühendamisel, koodi käivitamine oleku või rekvisiitide muutumisel, taimerite või intervallide seadistamine ja nii edasi.
UseEffecti kasutatakse peaaegu kõige jaoks, mida soovite Reacti komponendis "teha", mis ei tagasta JSX-i (mis tahes tüüpi kõrvalmõju). Ühe komponendi kohta võib olla ka mitu kasutusefekti.
Kogu see jõud maksab: kui te ei mõista, kuidas see töötab, võib see olla segadust tekitav. Selles postituses vaatleme erinevaid näiteid, et saaksite kontseptuaalsest mudelist aru saada ja seda oma koodile rakendada.
Reageeri konksud – Mida see lahendada püüab?
Konksud võeti esmakordselt kasutusele Reacti versioonis 16.8 ja neid kasutavad nüüd paljud Reacti projektid. Hooks saab üle komponentidevahelise koodi kordamise probleemist. Need on kirjutatud ilma klasse kasutamata. See ei tähenda, et React loobub klassidest; konksud on lihtsalt alternatiivne meetod.
React võimaldab teil kiiresti luua olekupõhise loogikaga keerukaid komponente. Neid komponente on raske eraldada, kuna klass tugineb React Lifecycle Methodsile. Siin tulevad mängu React Hooks.
Need võimaldavad jagada komponendi väiksemateks funktsioonideks. Selle asemel, et jagada koodi väiksemateks osadeks elutsükli meetodite alusel, saate nüüd sõltuvalt funktsioonidest koodi järjestada ja eraldada väiksemateks üksusteks.
Mis on useEffect Hook?
Konksud on funktsioonid, mis võimaldavad teil pääseda juurde oleku- ja muudele reageerimisvõimalustele ilma ES6 klasse kirjutamata. React hooks API-l on konks nimega useEffect. Kui olete kursis reageerimise elutsüklitega, on useEffecti konks sama, mis komponentDidMount, komponentDidUpdateja komponentWillUnmount kombineeritud elutsükli meetodid.
Vastavalt React Hooksi dokumentatsioonile loodi see mõne ES6 klassi komponentide elutsükli meetoditega seotud probleemide lahendamiseks.
Süntaks
Esimene argument on tagasihelistamise funktsioon, mis käivitatakse vaikimisi pärast iga renderdamist. Teine parameeter on valikuline sõltuvuse massiiv, mis käsib konksul tagasi helistada ainult siis, kui sihtolek muutub.
Konks võrdleb iga sõltuvuse ajaloolist ja praegust seisundit. Kui kaks väärtust ei ühti, kutsub konks esimeses parameetris määratud tagasihelistamise. Sõltuvusmassiivid muudavad tavalist tagasihelistamiskäitumist ja tagavad, et konks ignoreerib kõiki teisi komponente komponendi ulatuses.
Põhikasutus
Sõnumi salvestamiseks kasutan ülaltoodud koodinäidis React useState. Pärast seda võtan oma sõnumi olekumuutuja ja trükin selle ekraanile. Kuid nüüd tahan kasutada funktsiooni UseEffect, et muuta sõnumit sekund pärast komponendi ühendamist.
Sisestasin oma efekti rea useState taha pärast UseEffecti importimist Reacti raamistikust. Esimene parameeter useEffect on funktsioon. Kui see funktsioonikäsitleja käivitatakse, hoolitseb see teie pakutavate kõrvalmõjude eest. Funktsioon on tagasihelistamise funktsioon, mis kutsutakse välja, kui toimub mõni Reacti komponendi elutsükli sündmustest.
Millal seda kasutada?
UseEffecti konks võib olla kasulik erinevates olukordades. Järgmised on kõige olulisemad:
- Saame seda parameetrit kliendi poolelt muuta, kui soovime andmeid hankida sõltuvalt esitatud argumendist. See kutsutakse tagasi pärast parameetri värskendamist värskete andmetega.
- Kui tahame andmeid hankida API lõpp-punktist ja kuvada need kliendi poolel. Meie komponendi renderdamisel käivitatakse konksule useEffect antud funktsioon või töötleja ja komponendi olekutes olevad andmed hangitakse. Neid olekuid kasutatakse seejärel kasutajaliidese komponentides.
- Kui teie komponent tugineb välismaailma andmetele ja me ei saa tagada andmete kohalejõudmist, peaksime kasutama Effecti (võib-olla on server seal all). Selle asemel, et probleeme tekitada ja teiste komponentide kuvamist takistada, asetage need konksu useEffect.
Kasuta juhtudel
Kui komponent pärast esimest käitamist uuesti renderdab, siis seda ei käivitata.
Kui komponent renderdab või uuesti renderdab, tuleks see alati käivitada.
Vaikimisi töötab programm ainult üks kord. Pärast seda, kui rekvisiitide väärtused muutuvad, käivitage:
Asünkroonsete tegevuste puhul kasutage alati useEffecti.
UseEffecti koodiplokid on teie kaasarendajate jaoks ilmsed asünkroonsete tööde markerid. Asünkroonset koodi on võimalik luua ilma useEffecti kasutamata, kuid see ei ole “React-meetod” ja see suurendab nii keerukust kui ka vigade ohtu.
UseEffecti kasutamine asünkroonse koodi kirjutamise asemel, mis võib kasutajaliidese peatada, on Reacti kogukonnas hästi tuntud tehnika, eriti see, kuidas Reacti meeskond on selle loonud, et tekitada kõrvalmõju.
Selle kasutamise teine eelis on see, et arendajad saavad koodi lihtsalt üle vaadata ja kohe tuvastada koodi, mis on käivitatud väljaspool juhtimisvoogu, mis muutub oluliseks alles pärast esimest renderdustsüklit. Lisaks sobivad plokid ekstraheerimiseks korduvkasutatavateks ja veelgi semantilisteks kohandatud konksudeks.
Näide
Kasutades koodi useEffect, suurendage numbrit sekundis.
Järeldus
Minu arvates on useEffect Hooki disainipõhimõtete ja parimate tavade mõistmine ülioluline oskus, mida õppida, kui soovite saada järgmise taseme Reacti arendajaks.
Kokkuvõtteks võib öelda, et useEffect Hook saab funktsiooni, mis sisaldab kohustuslikku, potentsiaalselt mõju täielikku loogikat. Sõltuvusmassiivi, mis on teine parameeter, saab kasutada täitmise mõjutamiseks. Sellega tegeledes on vaja kirjutada ka puhastuskood kasutades return funktsiooni.
Andke meile kommentaarides teada, kas artikkel oli kasulik.
Jäta vastus