Când să folosiți useMemo și useCallback: un scurt ghid pentru fanii React

Dacă sunteți un dezvoltator React, este posibil să fi întâlnit deja discuții online React useMemo vs useCallback și să fi ajuns mai confuz decât oricând. Poate fi foarte greu să descoperi diferența dintre useMemo și useCallback. Asta e ok! Poate fi dificil să-ți înțelegi React-Hooks la început, dar pot fi extrem de utile în continuare.

În acest articol, vă vom arăta diferența dintre useCallback și useMemo și când să utilizați useCallback și useMemo.

Diferența dintre useMemo și useCallback

Două cârlige încorporate au fost introduse cu React 16.8. Aceste caracteristici au fost introduse pentru a optimiza performanța. Diferența dintre useMemo și useCallback pare neglijabilă, așa că vom încerca să curățăm confuzia.

Ce sunt React-Hooks?

Cârligele sunt caracteristici noi introduse în React care permit utilizarea Statelor și alte caracteristici React fără a scrie o clasă. Cârligele sunt metode și funcții care se „conecta” la starea și caracteristicile ciclului de viață ale React.

useCallback vs useMemo

Cârligul useCallback este folosit ori de câte ori o componentă copil este redată din nou și din nou, fără a fi nevoie cu adevărat. Când utilizați useCallback, puteți preveni această redare inutilă returnând aceeași instanță a acelei funcție care este transmisă în loc să creați o instanță nouă de fiecare dată. Acest lucru poate economisi o cantitate considerabilă de timp (și bani cheltuiți pe orele de dezvoltare). Transmiterea unei serii de dependențe cu un apel invers memorat va avea ca rezultat o versiune memorizată care va fi schimbată numai atunci când dependența se schimbă.

useMemo este utilizat în componenta funcțională a React. Este folosit pentru a returna o valoare memorată. Memorizarea se referă la procesul de economisire a timpului de recompilare prin returnarea unui rezultat stocat în cache în loc să recompileze o funcție cu același argument din nou pentru următoarea rulare. Rezultatul stocat în cache este returnat data viitoare când este apelat. UseMemo hooks oferă valori mapate în memorie.

În mod clar, există unele asemănări. Atât în ​​useMemo, cât și în useCallback, cârligul acceptă o funcție, precum și o serie de dependențe. Cu toate acestea, useCallback își va aminti valoarea returnată, iar useMemo își va aminti funcția. Cu alte cuvinte, unul memorează în cache un tip de valoare, iar celălalt memorează în cache o funcție.

• CITIȚI MAI MULT – Cum și de ce ar trebui să vă păstrați fișierele organizate
• Top 9 moduri de a folosi gadgeturile electronice în clasă

Când să utilizați useCallback vs useMemo

Deci, când ar trebui să utilizați useCallback și când este useMemo cea mai bună opțiune? Să ne uităm la un exemplu. Dacă un cod de calcul greu și costisitor acceptă argumente și returnează o valoare, useMemo este cea mai bună opțiune. În acest fel, puteți continua să faceți referire la valoarea dintre randări fără a rula din nou codul și a vă pierde timpul și puterea de calcul.

Dacă trebuie să păstrați o instanță de funcție persistentă în mai multe randări, ar trebui să utilizați în schimb useCallback, deoarece, în esență, plasează funcția în afara domeniului de aplicare al componentei dvs. React pentru a o păstra intactă.

Ce este useEffect?

Am menționat deja matricea de dependențe, pe care este posibil să l-ați întâlnit când utilizați useEffect. useEffect este un alt cârlig React. Este folosit pentru a gestiona efectele secundare din componentele funcționale folosind logica argumentului de apel invers. Dependențe sunt lista de dependențe ale efectului secundar, de exemplu, elemente de recuzită sau valori de stare.

Acest cârlig arată React că componenta trebuie să efectueze o acțiune după randare. Când DOM-ul este actualizat, efectul pe care îl treceți va fi stocat. De asemenea, puteți efectua preluarea datelor pentru a obține acest rezultat.

Pe scurt, useCallback, useMemo și useEffect sunt toate preocupate de îmbunătățirea performanței între redarea din nou a componentelor în aplicațiile React.

Totuși, este important să nu folosiți excesiv cârligele. Cârligele introduc o logică nouă și complexă și ar putea avea efectul opus față de cel dorit, creând probleme de performanță în loc să le rezolve. useMemo ar trebui folosit doar pentru calcule foarte costisitoare.

Nu utilizați useMemo sau useCallback pentru a remedia problemele fundamentale ale aplicației dvs. În cele din urmă, aceste probleme vor reapărea și vă vor bântui, așa că cel mai bine vă ocupați mai întâi de orice defecțiuni cunoscute.

• CITEȘTE MAI MULT – Cum să alegi cel mai bun CMS
• Care sunt avantajele și dezavantajele metodelor criptografice?

Concluzie

Sper că acest articol a fost perspicace și înțelegeți mai bine cele două cârlige. În concluzie:

• Ambele acceptă o funcție și o matrice de dependențe
• useMemo memorează valoarea returnată, useCallback memorează funcția.

Diferența dintre useMemo și useCallback este destul de clară! Aceste instrumente au potențialul de a economisi timp și bani, dar numai dacă sunt utilizate în contextul și mediul adecvat.

Sper că acest tutorial v-a ajutat să știți despre Când să utilizați useMemo și useCallback: un scurt ghid pentru fanii React . Dacă vrei să spui ceva, anunță-ne prin secțiunile de comentarii. Dacă vă place acest articol, distribuiți-l și urmăriți WhatVwant pe Facebook, Twitter și YouTube pentru mai multe sfaturi tehnice.

Când să utilizați useMemo și useCallback – Întrebări frecvente