Dacă ești un dezvoltator React care nu a aflat încă despre cârligele React, acum este momentul. Această postare va trece prin useEffect React Hook în detaliu. Este echivalentul cârlig al unui cuțit elvețian. Rezolvă o varietate de probleme, cum ar fi cum să obțineți date atunci când o componentă se montează, cum să rulați codul atunci când o stare sau un suport se schimbă, cum să configurați cronometre sau intervale și așa mai departe.
Un useEffect este folosit pentru aproape orice doriți să „faceți” într-o componentă React care nu returnează JSX (orice tip de efect secundar). Este posibil să aveți, de asemenea, mai multe efecte de utilizare per componentă.
Toată această putere are un cost: dacă nu înțelegeți cum funcționează, poate fi nedumerit. În această postare, vom analiza o varietate de exemple, astfel încât să puteți înțelege modelul conceptual și să-l aplicați propriului cod.
Reaction Hooks – Ce încearcă să rezolve?
Cârligele au fost introduse pentru prima dată în versiunea React 16.8 și sunt acum utilizate de multe proiecte React. Hooks depășește problema repetiției codului între componente. Sunt scrise fără a folosi cursuri. Acest lucru nu înseamnă că React abandonează cursurile; cârligele sunt pur și simplu o metodă alternativă.
React vă permite să creați rapid componente sofisticate cu o logică de stat. Este dificil să se separe aceste componente, deoarece clasa se bazează pe React Lifecycle Methods. Aici intervin React Hooks.
Acestea vă permit să împărțiți o componentă în funcții mai mici. În loc să împărțiți codul în bucăți mai mici pe baza metodelor Lifecycle, acum puteți aranja și separa codul în unități mai mici, în funcție de funcționalitate.
Ce este useEffect Hook?
Cârligele sunt funcții care vă permit să accesați capacități de stare și alte capacități de reacție fără a fi nevoie să scrieți clase ES6. API-ul react hooks are un hook numit useEffect. Dacă sunteți familiarizat cu ciclurile de viață react, cârligul useEffect este același cu componentDidMount, componentDidUpdate, și componentWillUnmount metode ciclului de viață combinate.
Conform documentației React Hooks, a fost creat pentru a rezolva unele dintre problemele cu metodele ciclului de viață al componentelor din clasa ES6.
Sintaxă
Primul argument este o funcție de apel invers, care este executată implicit după fiecare randare. Al doilea parametru este o matrice de dependență opțională care indică Hook să apeleze înapoi numai dacă starea țintă se schimbă.
The Hook compară stările istorice și prezente ale fiecărei dependențe. Dacă cele două valori nu se potrivesc, Hook invocă callback-ul specificat în primul parametru. Matricele de dependență modifică comportamentul obișnuit de apel invers și garantează că Hook ignoră toate celelalte componente din domeniul de aplicare al componentei.
Utilizare de bază
Pentru a salva un mesaj, folosesc React useState în exemplul de cod de mai sus. După aceea, iau variabila de stare a mesajului și o imprim pe ecran. Cu toate acestea, acum vreau să folosescEffect pentru a modifica mesajul la o secundă după ce componenta a fost montată.
Mi-am inserat efectul în spatele liniei useState după ce am importat useEffect din cadrul React. Primul parametru care trebuie utilizat este o funcție. Când acest handler de funcții este executat, se va ocupa de orice efecte secundare pe care le furnizați. Funcția este o funcție de apel invers care este apelată atunci când are loc unul dintre evenimentele ciclului de viață al componentei React.
Când să-l folosiți?
Cârligul useEffect poate fi util într-o varietate de situații. Următoarele sunt cele mai importante:
- Putem schimba acest parametru din partea clientului atunci când dorim să obținem date în funcție de un argument furnizat. Acesta va fi rechemat după ce parametrul a fost actualizat cu date noi.
- Dacă dorim să extragem date de la un punct final API și să le afișăm pe partea clientului. Când componenta noastră este redată, funcția sau handlerul dat cârligului useEffect este executat și datele din stările componente sunt recuperate. Aceste stări sunt apoi folosite în componentele interfeței cu utilizatorul.
- Când componenta dvs. se bazează pe date din lumea exterioară și nu ne putem asigura că vor ajunge datele, ar trebui să folosim Effect (poate că serverul este acolo jos). În loc să aruncați probleme și să împiedicați afișarea altor componente, plasați-le în cârligul useEffect.
Cazuri de utilizare
Dacă componenta se redă după prima rulare, nu se va executa.
Ori de câte ori o componentă este redată sau redată din nou, ar trebui să fie întotdeauna executată.
În mod implicit, programul rulează o singură dată. După aceea, dacă valorile prop se schimbă, rulați:
Pentru activități asincrone, utilizați întotdeauna useEffect.
Blocurile de cod useEffect sunt markeri evidenti ai joburilor asincrone pentru colegii dvs. dezvoltatori. Este posibil să creați cod asincron fără a utiliza useEffect, dar aceasta nu este „metoda React” și crește atât complexitatea, cât și riscul de greșeli.
Utilizarea useEffect în loc de a scrie cod asincron care poate opri interfața de utilizare este o tehnică binecunoscută în comunitatea React, în special modul în care echipa React a creat-o pentru a produce un efect secundar.
Un alt avantaj al utilizării acestuia este că dezvoltatorii pot pur și simplu să revizuiască codul și să detecteze imediat codul care este rulat „în afara fluxului de control”, care devine important doar după primul ciclu de randare. În plus, blocurile sunt potrivite pentru extragerea în cârlige personalizate reutilizabile și chiar mai semantice.
Un exemplu
Folosind codul useEffect, incrementați un număr pe secundă.
Concluzie
Înțelegerea principiilor de proiectare de bază și a celor mai bune practici ale useEffect Hook, în opinia mea, este o abilitate esențială de învățat dacă doriți să deveniți un dezvoltator React de nivel următor.
Pentru a rezuma, useEffect Hook primește o funcție care include logica completă imperativă, cu potențial efect. Matricea de dependență, care este al doilea parametru, poate fi folosită pentru a influența execuția. În timp ce vă ocupați de el, este, de asemenea, necesar să scrieți codul de curățare folosind funcția de returnare.
Spune-ne în comentarii dacă articolul a fost util.
Lasă un comentariu