Ako ste React programer koji još nije naučio o React kukicama, sada je trenutak. Ovaj post će detaljno proći kroz useEffect React Hook. To je udica ekvivalentna švicarskom nožu. Rješava niz problema, kao što je kako doći do podataka kada se komponenta montira, kako pokrenuti kod kada se stanje ili props promijeni, kako postaviti tajmere ili intervale, itd.
UseEffect se koristi za skoro sve što želite da "uradite" u React komponenti koja ne vraća JSX (bilo koji tip nuspojave). Također možete imati nekoliko useEffect-a po komponenti.
Sva ova moć ima svoju cijenu: osim ako ne razumijete kako funkcionira, može biti zbunjujuće. U ovom postu ćemo pogledati razne primjere kako biste mogli shvatiti konceptualni model i primijeniti ga na svoj vlastiti kod.
React Hooks – Šta pokušava da reši?
Hooks su prvi put predstavljeni u React verziji 16.8 i sada ih koriste mnogi React projekti. Hooks prevazilazi problem ponavljanja koda između komponenti. Napisane su bez upotrebe klasa. Ovo ne znači da React napušta klase; kuke su jednostavno alternativna metoda.
React vam omogućava da brzo kreirate sofisticirane komponente sa logikom praćenja stanja. Teško je razdvojiti ove komponente jer se klasa oslanja na React Lifecycle Methods. Ovdje dolaze React Hooks.
Oni vam omogućavaju da komponentu podijelite na manje funkcije. Umjesto podjele koda na manje dijelove na osnovu metoda životnog ciklusa, sada možete urediti i odvojiti kod u manje jedinice ovisno o funkcionalnosti.
Šta je useEffect Hook?
Hooks su funkcije koje vam omogućavaju pristup stanju i drugim sposobnostima reagovanja bez potrebe za pisanjem ES6 klasa. React hooks API ima kuku koja se zove useEffect. Ako ste upoznati sa životnim ciklusima reakcije, useEffect kuka je ista kao i komponentaDidMount, componentsDidUpdate, I komponentaWillUnmount kombinovane metode životnog ciklusa.
Prema React Hooks dokumentaciji, kreiran je da riješi neke probleme sa metodama životnog ciklusa komponente ES6 klase.
sintaksa
Prvi argument je funkcija povratnog poziva, koja se po defaultu izvršava nakon svakog renderiranja. Drugi parametar je opcioni niz zavisnosti koji upućuje zakačicu na povratni poziv samo ako se promijeni ciljno stanje.
Hook upoređuje historijska i sadašnja stanja svake zavisnosti. Ako se dvije vrijednosti ne podudaraju, Hook poziva povratni poziv naveden u prvom parametru. Nizovi zavisnosti menjaju uobičajeno ponašanje povratnog poziva i garantuju da Hook ignoriše sve ostale komponente u opsegu komponente.
Osnovna upotreba
Da sačuvam poruku, koristim React useState u primjeru koda iznad. Nakon toga, uzimam svoju varijablu stanja poruke i ispisujem je na ekranu. Međutim, sada želim da koristim Effect da izmijenim poruku sekundu nakon što je komponenta montirana.
Ubacio sam svoj efekat iza linije useState nakon uvoza useEffect-a iz React okvira. Prvi parametar za useEffect je funkcija. Kada se ovaj rukovatelj funkcijama izvrši, on će se pobrinuti za sve nuspojave koje pružite. Funkcija je funkcija povratnog poziva koja se poziva kada se dogodi jedan od događaja životnog ciklusa komponente React.
Kada ga koristiti?
UseEffect kuka može biti korisna u raznim situacijama. Najvažnije su sljedeće:
- Možemo promijeniti ovaj parametar sa strane klijenta kada želimo dohvatiti podatke ovisno o dostavljenom argumentu. Biće opozvan nakon što se parametar ažurira novim podacima.
- Ako želimo da dohvatimo podatke sa API krajnje tačke i prikažemo ih na strani klijenta. Kada se naša komponenta renderira, izvršava se funkcija ili rukovalac koji je dat zakačici useEffect, a podaci u stanjima komponente se preuzimaju. Ovi statusi se zatim koriste u komponentama korisničkog interfejsa.
- Kada se vaša komponenta oslanja na podatke iz vanjskog svijeta i ne možemo osigurati da će podaci stići, trebali bismo koristiti Effect (možda je server tamo dolje). Umjesto da izazivate probleme i spriječite prikazivanje drugih komponenti, postavite ih u useEffect kuku.
Koristite slučajeve
Ako se komponenta ponovo prikaže nakon prvog pokretanja, neće se izvršiti.
Kad god se komponenta renderira ili ponovo prikazuje, uvijek je treba izvršiti.
Podrazumevano, program se pokreće samo jednom. Nakon toga, ako se promijene vrijednosti propa, pokrenite:
Za asinkrone aktivnosti uvijek koristite useEffect.
useEffect kodni blokovi su očigledni markeri asinhronih poslova za vaše kolege programere. Moguće je kreirati asinhroni kod bez korištenja useEffect-a, ali ovo nije “react metoda” i povećava i složenost i rizik od grešaka.
Korištenje useEffect-a umjesto pisanja asinhronog koda koji može zaustaviti korisničko sučelje je dobro poznata tehnika u React zajednici, posebno način na koji ju je React tim izgradio za izvođenje nuspojava.
Još jedna prednost njegovog korištenja je ta što programeri mogu jednostavno pregledati kod i odmah otkriti kod koji se pokreće „izvan toka kontrole“, što postaje važno tek nakon prvog ciklusa renderiranja. Nadalje, blokovi su pogodni za ekstrakciju u višekratne i još više semantičke prilagođene kuke.
Primjer
Koristeći useEffect kod, povećajte broj u sekundi.
zaključak
Razumijevanje osnovnih principa dizajna i najbolje prakse useEffect Hook-a, po mom mišljenju, je ključna vještina koju treba naučiti ako želite da postanete React programer sljedećeg nivoa.
Ukratko, useEffect Hook prima funkciju koja uključuje imperativnu, potencijalno efektnu punu logiku. Niz zavisnosti, koji je drugi parametar, može se koristiti da utiče na izvršenje. Dok se bavite time, također je potrebno napisati kod za čišćenje pomoću funkcije return.
Javite nam u komentarima je li članak bio od pomoći.
Ostavite odgovor