Ako ste React programer koji još nije naučio o React kukicama, sada je trenutak. Ovaj će post detaljno proći kroz useEffect React Hook. To je udica ekvivalentna švicarskom nožu. Rješava niz problema, kao što je kako dobiti podatke kada se komponenta montira, kako pokrenuti kod kada se stanje ili props promijeni, kako postaviti mjerače vremena ili intervale, itd.
UseEffect se koristi za gotovo sve što želite "učiniti" u komponenti Reacta koja ne vraća JSX (bilo koju vrstu nuspojave). Također možete imati nekoliko useEffects po komponenti.
Sva ta moć ima cijenu: osim ako ne razumijete kako funkcionira, može biti zbunjujuće. U ovom ćemo postu pogledati razne primjere kako biste mogli shvatiti konceptualni model i primijeniti ga na svoj vlastiti kod.
Reagirajte kuke – Što se pokušava riješiti?
Hooks su prvi put predstavljeni u React verziji 16.8 i sada ih koriste mnogi React projekti. Hooks prevladava problem ponavljanja koda između komponenti. Napisane su bez upotrebe klasa. To ne znači da React napušta klase; udice su jednostavno alternativna metoda.
React vam omogućuje da brzo kreirate sofisticirane komponente s logikom praćenja stanja. Teško je odvojiti ove komponente jer se klasa oslanja na React Lifecycle Methods. Ovdje dolaze React Hooks.
Omogućuju vam da komponentu podijelite na manje funkcije. Umjesto dijeljenja koda na manje dijelove na temelju metoda životnog ciklusa, sada možete rasporediti i odvojiti kod u manje jedinice ovisno o funkcionalnosti.
Što je useEffect Hook?
Hooks su funkcije koje vam omogućuju pristup stanju i drugim sposobnostima reakcije bez potrebe za pisanjem ES6 klasa. React hooks API ima kuku koja se zove useEffect. Ako ste upoznati s životnim ciklusima reakcije, kuka useEffect je ista kao i komponentaDidMount, komponentaDidUpdatei componentWillUnmount kombinirane metode životnog ciklusa.
Prema React Hooks dokumentaciji, stvoren je da riješi neke probleme s metodama životnog ciklusa komponente ES6.
Sintaksa
Prvi argument je funkcija povratnog poziva, koja se prema zadanim postavkama izvršava nakon svakog renderiranja. Drugi parametar je izborni niz ovisnosti koji upućuje kuku na povratni poziv samo ako se promijeni ciljno stanje.
Hook uspoređuje povijesna i sadašnja stanja svake ovisnosti. Ako se dvije vrijednosti ne podudaraju, Hook poziva povratni poziv naveden u prvom parametru. Nizovi ovisnosti mijenjaju uobičajeno ponašanje povratnog poziva i jamče da Hook ignorira sve ostale komponente u opsegu komponente.
Osnovna upotreba
Za spremanje poruke koristim React useState u primjeru koda iznad. Nakon toga, uzimam svoju varijablu stanja poruke i ispisujem je na ekranu. Međutim, sada želim koristiti Effect za izmjenu poruke sekundu nakon što je komponenta montirana.
Umetnuo sam svoj efekt iza linije useState nakon uvoza useEffect iz React okvira. Prvi parametar za useEffect je funkcija. Kada se ovaj rukovatelj funkcijama izvrši, pobrinut će se 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:
- Ovaj parametar možemo promijeniti sa strane klijenta kada želimo dohvatiti podatke ovisno o dostavljenom argumentu. Bit će pozvan nakon što se parametar ažurira svježim podacima.
- Ako želimo dohvatiti podatke s krajnje točke API-ja i prikazati ih na strani klijenta. Kada se naša komponenta renderira, izvršava se funkcija ili rukovatelj koji je dao kuki useEffect, a podaci u stanjima komponente se dohvaćaju. Ti se statusi zatim koriste u komponentama korisničkog sučelja.
- 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 poslužitelj tamo dolje). Umjesto da stvarate probleme i spriječite prikaz drugih komponenti, postavite ih u useEffect kuku.
Koristite slučajevi
Ako se komponenta ponovno generira nakon prvog pokretanja, neće se izvršiti.
Kad god se komponenta renderira ili ponovno renderira, uvijek se treba izvršiti.
Prema zadanim postavkama, program se pokreće samo jednom. Nakon toga, ako se promijene vrijednosti propa, pokrenite:
Za asinkrone aktivnosti uvijek koristite useEffect.
useEffect kodni blokovi očiti su markeri asinkronih poslova za vaše kolege programere. Moguće je stvoriti asinkroni kod bez korištenja useEffect-a, ali ovo nije “react metoda” i povećava i složenost i rizik od pogrešaka.
Korištenje useEffect umjesto pisanja asinkronog 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 nuspojave.
Još jedna prednost njegovog korištenja je ta što programeri mogu jednostavno pregledati kod i odmah otkriti kod koji se izvodi "izvan toka kontrole", što postaje važno tek nakon prvog ciklusa renderiranja. Nadalje, blokovi su prikladni 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 temeljnih načela dizajna i najboljih praksi useEffect Hooka, po mom mišljenju, ključna je vještina koju treba naučiti ako želite postati React programer sljedeće razine.
Ukratko, useEffect Hook prima funkciju koja uključuje imperativnu, potencijalno efektnu punu logiku. Niz ovisnosti, koji je drugi parametar, može se koristiti za utjecaj 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.
Ostavi odgovor