Če ste React razvijalec, ki se še niste naučili o kaveljčkih React, je zdaj pravi trenutek. Ta objava bo podrobno prešla skozi useEffect React Hook. Je enakovreden kavlju švicarskemu nožu. Rešuje različna vprašanja, na primer, kako pridobiti podatke, ko se komponenta namesti, kako zagnati kodo, ko se stanje ali pripomoček spremeni, kako nastaviti časovnike ali intervale itd.
UseEffect se uporablja za skoraj vse, kar želite "narediti" v komponenti React, ki ne vrača JSX (kakršen koli stranski učinek). Lahko imate tudi več useEffectov na komponento.
Vsa ta moč ima svojo ceno: če ne razumete, kako deluje, je lahko zmedeno. V tej objavi si bomo ogledali različne primere, da boste lahko razumeli konceptualni model in ga uporabili v svoji kodi.
Reagic Hooks – Kaj poskuša rešiti?
Hooks so bili prvič predstavljeni v različici React 16.8 in jih zdaj uporabljajo številni projekti React. Hooks premaga problem ponavljanja kode med komponentami. Napisane so brez uporabe razredov. To ne pomeni, da React opušča razrede; kavlji so preprosto alternativna metoda.
React vam omogoča, da hitro ustvarite sofisticirane komponente z logiko stanja. Te komponente je težko ločiti, saj se razred opira na metode življenjskega cikla React. Tu pridejo na vrsto React Hooks.
Omogočajo vam, da komponento razdelite na manjše funkcije. Namesto da bi kodo delili na manjše dele na podlagi metod življenjskega cikla, lahko zdaj razporedite in ločite kodo na manjše enote, odvisno od funkcionalnosti.
Kaj je useEffect Hook?
Hooks so funkcije, ki vam omogočajo dostop do stanja in drugih zmožnosti odzivanja, ne da bi morali pisati razrede ES6. React hooks API ima kavelj, imenovan useEffect. Če poznate življenjske cikle reagiranja, je kavelj useEffect enak komponentaDidMount, componentDidUpdatein komponentaWillUnmount kombinirane metode življenjskega cikla.
Glede na dokumentacijo React Hooks je bil ustvarjen za reševanje nekaterih težav z metodami življenjskega cikla komponent razreda ES6.
Sintaksa
Prvi argument je funkcija povratnega klica, ki se privzeto izvede po vsakem upodabljanju. Drugi parameter je neobvezna matrika odvisnosti, ki kavlju naroči povratni klic le, če se ciljno stanje spremeni.
Hook primerja zgodovinsko in sedanje stanje vsake odvisnosti. Če se obe vrednosti ne ujemata, kavelj pokliče povratni klic, določen v prvem parametru. Nizi odvisnosti spreminjajo običajno obnašanje povratnega klica in zagotavljajo, da Hook ignorira vse druge komponente v obsegu komponente.
Osnovna uporaba
Za shranjevanje sporočila uporabljam React useState v zgornjem vzorcu kode. Po tem vzamem svojo spremenljivko stanja sporočila in jo natisnem na zaslon. Vendar zdaj želim uporabiti Effect za spreminjanje sporočila sekundo po tem, ko je bila komponenta nameščena.
Svoj učinek sem vstavil za vrstico useState po uvozu useEffect iz ogrodja React. Prvi parameter za useEffect je funkcija. Ko se ta upravljalnik funkcij izvaja, bo poskrbel za vse neželene učinke, ki jih zagotovite. Funkcija je funkcija povratnega klica, ki se pokliče, ko pride do enega od dogodkov življenjskega cikla komponente React.
Kdaj ga uporabiti?
Kavelj useEffect je lahko uporaben v različnih situacijah. Najpomembnejše so naslednje:
- Ta parameter lahko spremenimo s strani odjemalca, ko želimo pridobiti podatke glede na podani argument. Priklican bo, ko bo parameter posodobljen s svežimi podatki.
- Če želimo pridobiti podatke iz končne točke API in jih prikazati na strani odjemalca. Ko se naša komponenta upodablja, se izvede funkcija ali upravljalnik, ki je dan kavlju useEffect, in pridobijo se podatki v stanjih komponent. Ti statusi se nato uporabijo v komponentah uporabniškega vmesnika.
- Ko se vaša komponenta zanaša na podatke iz zunanjega sveta in ne moremo zagotoviti, da bodo podatki prispeli, bi morali uporabiti Effect (morda je strežnik tam spodaj). Namesto da povzročate težave in preprečite prikazovanje drugih komponent, jih postavite v kavelj useEffect.
Uporabite primeri
Če se komponenta ponovno upodablja po prvem zagonu, se ne bo izvajala.
Kadar koli se komponenta upodablja ali ponovno upodablja, jo je treba vedno izvesti.
Privzeto se program zažene samo enkrat. Nato, če se vrednosti prop spremenijo, zaženite:
Za asinhrone dejavnosti vedno uporabite useEffect.
Bloki kod useEffect so očitni označevalci asinhronih opravil za vaše kolege razvijalce. Asinhrono kodo je mogoče ustvariti brez uporabe useEffect-a, vendar to ni "metoda React" in poveča tako zapletenost kot tveganje za napake.
Uporaba useEffect namesto pisanja asinhrone kode, ki lahko ustavi uporabniški vmesnik, je dobro znana tehnika v skupnosti React, zlasti način, kako jo je ekipa React zgradila za izvajanje stranskega učinka.
Druga prednost njegove uporabe je, da lahko razvijalci preprosto pregledajo kodo in takoj zaznajo kodo, ki se izvaja »izven toka nadzora«, kar postane pomembno šele po prvem ciklu upodabljanja. Poleg tega so bloki primerni za ekstrakcijo v ponovno uporabne in še bolj pomenske kljuke po meri.
Primer
S kodo useEffect povečajte število na sekundo.
zaključek
Po mojem mnenju je razumevanje osnovnih načel oblikovanja in najboljših praks useEffect Hook ključna veščina, če želite postati React razvijalec naslednje stopnje.
Če povzamemo, useEffect Hook prejme funkcijo, ki vključuje nujno, potencialno učinkovito celotno logiko. Niz odvisnosti, ki je drugi parameter, se lahko uporablja za vplivanje na izvedbo. Med obravnavo je potrebno napisati tudi čistilno kodo s funkcijo vračanja.
Sporočite nam v komentarjih, če je bil članek koristen.
Pustite Odgovori