Pasirinktinių kabliukų naudojimas " React" sistemoje tapo išradingu metodu, kaip abstrahuoti pasikartojančią logiką ir pagerinti komponentų skaitomumą bei tvarkymą. Šioje pamokoje sužinosite, kaip sukurti savo kabliukus, specialiai skirtus JSON duomenims iš serverio gauti, naudojant "useJsonFetch " pavyzdį. Pasinerkime į šią užduotį.
Pagrindinės žinios
- Pasirinktiniai kabliukai - tai paprastos funkcijos, kurios naudoja "React" kabliukus.
- Jos leidžia pakartotinai naudoti logiką keliuose komponentuose.
- Pasirinktinis kabliukas gali tvarkyti kelias būsenas, pavyzdžiui, krovimo, duomenų ir klaidos.
- Pasirinktinio kabliuko struktūra ir įgyvendinimas yra nesudėtingi ir paprasti.
Žingsnis po žingsnio, kaip sukurti useJsonFetch kabliuką
Pagrindinis svarstymas
Prieš rašydami savo kabliuką, svarbu apibrėžti reikiamą funkcionalumą. Šiuo atveju norite sukurti kabliuką, kuris iš serverio gautų JSON duomenis. Savo kabliuką pavadinsime "useJsonFetch". Norėdami suprasti, kaip įgyvendinti šį kabliuką, pirmiausia panagrinėkite "useJsonFetch" naudojimą komponente.
Iškviečiate kabliuką ir perduodate URL, iš kurio norite gauti JSON duomenis. Kabliukas bus atsakingas už duomenų gavimą ir apkrovos bei klaidų būsenų tvarkymą.
UseJsonFetch įgyvendinimas
Norėdami įgyvendinti pasirinktinį kabliuką, sukurkite naują failą, kuris prasideda "use", kad atitiktų "React" konvencijas. Todėl failo pavadinimas būtų useJsonFetch.js.
Šiame faile sukursite funkciją, kuri kaip parametrą priima URL adresą. Funkcijoje apibrėžiate duomenų, klaidos ir įkėlimo būsenas.
Čia duomenys iš pradžių yra neapibrėžti, klaida taip pat neapibrėžta, o krovimas prasideda reikšme true, rodančia krovimo būseną. Taip yra dėl to, kad "JavaScript" tvarko asinchronines operacijas.
UseEffect naudojimas
Kablyje naudokite useEffect, kad pradėtumėte duomenų gavimo procesą, kai komponentas yra prijungtas. Įsitikinkite, kad atitinkamai atnaujinate krovimo būseną.
Naudodami await pirmiausia iškviečiate URL su fetch. Kadangi fetch grąžina pažadą, galite laukti atsakymo naudodami await. Gavę atsakymą, duomenis konvertuojate į "JavaScript" objektą naudodami.json().
Jei įvyksta klaida, pagaunate ją su try-catch ir nustatote klaidos būseną. Nepriklausomai nuo to, ar užklausa buvo sėkminga, ar įvyko klaida, turėtumėte užtikrinti, kad gavę atsakymą nustatytumėte loading į false.
Kabliuko grąžinimas
Pabaigoje grąžinkite būsenas data, error ir loading kaip objektą, kad šias reikšmes galėtų gauti skambinantis komponentas.
Kabliuko naudojimas komponente
Dabar, sukūrę kabliuką, galite jį naudoti komponente. Importuokite "useJsonFetch" į savo komponentą ir naudokite destrukciją reikšmėms gauti.
Tada galite įgyvendinti įkrovimo indikatorių, užklausdami įkrovimo užklausą, ir rodyti gautus duomenis, kai jie bus prieinami.
Naudodami useJsonFetch galite išlaikyti loginį duomenų gavimo ir vartotojo sąsajos logikos atskyrimą, o tai labai pagerina jūsų komponentų priežiūrą.
Išvada apie pasirinktinių kabliukų kūrimą
Pasirinktinių kabliukų kūrimas yra paprastas, bet veiksmingas procesas, padedantis organizuoti jūsų kodą. Galite inkapsuliuoti daugkartinio naudojimo logiką ir įgyvendinti ją bet kuriame komponente, kuriam reikia tos pačios funkcijos. Naudodami pasirinktinius kabliukus taip pat galite atskirti tinklo duomenų gavimą ir reagavimą į apkrovos ar klaidos sąlygas nuo duomenų pateikimo.
Apibendrinimas
Naudodami pasirinktinį kabliuką, pavyzdžiui, useJsonFetch, sužinojote, kaip valdyti asinchroninį duomenų surinkimą "React" sistemoje. Tai gerokai pagerina jūsų kodo daugkartinio naudojimo galimybes ir struktūrą. Pamatėte, kaip galite sukurti paprastą struktūrą JSON duomenims gauti ir efektyviai valdyti įvairias būsenas.
Dažniausiai užduodami klausimai
Kas yra pasirinktinis kabliukas? Pasirinktinis kabliukas yra "JavaScript" funkcija, kuri naudoja "React" kabliukus logikai, kuri gali būti pakartotinai naudojama keliuose komponentuose, inkapsuliuoti.
Kaip įgyvendinti "useJsonFetch" kabliuką? Naujame faile sukurkite funkciją, kuri kaip parametrą priima URL adresą ir naudoja "React" kabliukus, tokius kaip "useState" ir "useEffect".
Kodėl turėčiau naudoti pasirinktinius kabliukus? Naudodami pasirinktinius kabliukus galite supaprastinti pasikartojančią logiką ir sutvarkyti kodą. Tai pagerina jūsų komponentų palaikomumą.
Ar galiu viename faile turėti kelis kabliukus? Taip, viename faile galite apibrėžti ir eksportuoti kelis kabliukus, jei jie atitinka tam tikrą kontekstą ar funkcionalumą.
Kaip tvarkyti klaidas pasirinktiniame kabliuke? Galite gaudyti klaidas naudodami try-catch bloką ir atitinkamai atnaujinti klaidos būseną.
