Jei esate „React“ kūrėjas, dar nesužinojęs apie „React hooks“, dabar pats laikas. Šiame įraše bus išsamiai aprašyta „useEffect React Hook“. Tai Šveicarijos armijos peilio kablio atitikmuo. Jis išsprendžia įvairias problemas, pvz., kaip gauti duomenis, kai komponentas prijungiamas, kaip paleisti kodą, kai pasikeičia būsena ar rekvizitas, kaip nustatyti laikmačius ar intervalus ir pan.
UseEffect naudojamas beveik viskam, ką norite „daryti“ React komponente, kuris negrąžina JSX (bet kokio tipo šalutinio poveikio). Taip pat galite turėti keletą naudojimoEfektų vienam komponentui.
Visa ši galia kainuoja: jei nesuprantate, kaip ji veikia, tai gali būti gluminanti. Šiame įraše apžvelgsime įvairius pavyzdžius, kad galėtumėte suvokti koncepcinį modelį ir pritaikyti jį savo kodui.
Reakcijos kabliai – Ką ji bando išspręsti?
Kabliukai pirmą kartą buvo pristatyti React 16.8 versijoje ir dabar naudojami daugelyje React projektų. Kabliukai įveikia kodo pasikartojimo tarp komponentų problemą. Jie parašyti nenaudojant klasių. Tai nereiškia, kad React atsisako užsiėmimų; kabliukai yra tiesiog alternatyvus būdas.
„React“ leidžia greitai sukurti sudėtingus komponentus su būsenos logika. Sunku atskirti šiuos komponentus, nes klasė remiasi „React Lifecycle Methods“. Čia atsiranda „React Hooks“.
Jie leidžia padalinti komponentą į mažesnes funkcijas. Užuot dalinę kodą į mažesnes dalis pagal gyvavimo ciklo metodus, dabar galite išdėstyti ir atskirti kodą į mažesnius vienetus, atsižvelgdami į funkcionalumą.
Kas yra „useEffect Hook“?
Kabliukai yra funkcijos, leidžiančios pasiekti būsenos ir kitas reagavimo galimybes, nerašydami ES6 klasių. React hooks API turi kabliuką, vadinamą useEffect. Jei esate susipažinę su reakcijos gyvavimo ciklais, useEffect kabliukas yra toks pat kaip ir komponentDidMount, komponentasDidUpdateir komponentasWillUnmount derinami gyvavimo ciklo metodai.
Remiantis „React Hooks“ dokumentacija, jis buvo sukurtas siekiant išspręsti kai kurias ES6 klasės komponentų gyvavimo ciklo metodų problemas.
sintaksės
Pirmasis argumentas yra atgalinio ryšio funkcija, kuri pagal numatytuosius nustatymus vykdoma po kiekvieno pateikimo. Antrasis parametras yra neprivalomas Priklausomybės masyvas, kuris nurodo Hook skambinti atgal tik pasikeitus tikslinei būsenai.
Kablys lygina kiekvienos priklausomybės istorinę ir dabartinę būseną. Jei dvi reikšmės nesutampa, „Hook“ iškviečia pirmajame parametre nurodytą atgalinį skambutį. Priklausomybės masyvai pakeičia įprastą atgalinio skambinimo elgesį ir garantuoja, kad „Hook“ nepaisys visų kitų komponentų apimties komponentų.
Pagrindinis vartojimas
Norėdami išsaugoti pranešimą, aukščiau pateiktame kodo pavyzdyje naudoju React useState. Po to paimu savo pranešimo būsenos kintamąjį ir atspausdinu jį ekrane. Tačiau dabar noriu useEffect modifikuoti pranešimą praėjus sekundei po komponento prijungimo.
Importavęs useEffect iš „React“ sistemos, įterpiau savo efektą už „useState“ eilutės. Pirmasis useEffect parametras yra funkcija. Kai ši funkcijų tvarkytuvė bus vykdoma, ji pasirūpins bet kokiu jūsų pateiktu šalutiniu poveikiu. Funkcija yra atgalinio skambinimo funkcija, kuri iškviečiama, kai įvyksta vienas iš React komponento gyvavimo ciklo įvykių.
Kada jį naudoti?
„useEffect Hook“ gali būti naudingas įvairiose situacijose. Šios yra svarbiausios:
- Mes galime pakeisti šį parametrą iš kliento pusės, kai norime gauti duomenis, priklausomai nuo pateikto argumento. Jis bus atšauktas, kai parametras bus atnaujintas naujais duomenimis.
- Jei norime gauti duomenis iš API galinio taško ir parodyti juos kliento pusėje. Kai pateikiamas mūsų komponentas, vykdoma funkcija arba tvarkytojas, suteiktas useEffect kabliui, ir gaunami komponentų būsenų duomenys. Tada šios būsenos naudojamos vartotojo sąsajos komponentuose.
- Kai jūsų komponentas remiasi duomenimis iš išorinio pasaulio ir negalime užtikrinti, kad duomenys būtų atvykę, turėtume naudotiEffect (galbūt serveris yra apačioje). Užuot išmetę problemų ir neleisdami rodyti kitų komponentų, įdėkite juos į „useEffect“ kabliuką.
Naudokite atvejai
Jei komponentas pakartotinai pateikiamas po pirmojo paleidimo, jis nebus vykdomas.
Kai komponentas atvaizduojamas arba atvaizduojamas iš naujo, jis visada turi būti vykdomas.
Pagal numatytuosius nustatymus programa paleidžiama tik vieną kartą. Vėliau, jei pasikeis rekvizito vertės, paleiskite:
Asinchroninei veiklai visada naudokite useEffect.
UseEffect kodo blokai yra akivaizdūs asinchroninių užduočių žymekliai jūsų kolegoms kūrėjams. Galima sukurti asinchroninį kodą nenaudojant useEffect, tačiau tai nėra „React“ metodas ir tai padidina tiek sudėtingumą, tiek klaidų riziką.
Naudoti useEffect, o ne rašyti asinchroninį kodą, kuris gali sustabdyti vartotojo sąsają, yra gerai žinomas būdas React bendruomenėje, ypač tai, kaip React komanda sukūrė jį, kad atliktų šalutinį poveikį.
Kitas jo naudojimo pranašumas yra tai, kad kūrėjai gali tiesiog peržiūrėti kodą ir iš karto aptikti kodą, kuris paleistas „už valdymo srauto ribų“, kuris tampa svarbus tik po pirmojo pateikimo ciklo. Be to, blokai yra tinkami išgauti į daugkartinio naudojimo ir dar labiau semantinius pasirinktinius kabliukus.
Pavyzdys
Naudodami kodą useEffect, padidinkite skaičių per sekundę.
Išvada
Mano nuomone, pagrindinių „useEffect Hook“ projektavimo principų ir geriausios praktikos supratimas yra labai svarbus įgūdis, kurio reikia išmokti, jei norite tapti naujo lygio „React“ kūrėju.
Apibendrinant galima pasakyti, kad „useEffect Hook“ gauna funkciją, kuri apima būtiną, potencialiai efektingą visą logiką. Priklausomybės masyvas, kuris yra antrasis parametras, gali būti naudojamas vykdymui paveikti. Dirbant su juo, taip pat būtina parašyti valymo kodą naudojant grąžinimo funkciją.
Praneškite mums komentaruose, ar straipsnis buvo naudingas.
Palikti atsakymą