Introducere în React useCallBack()

Când construiți un site web folosind React, este important să luați în considerare cât de repede se încarcă și cât de repede pot interacționa utilizatorii cu el. O modalitate de a face un site web React mai rapid este de a-l împiedica să facă lucrări inutile, cum ar fi re-rendarea unor părți ale paginii care nu s-au schimbat.

FuncțiauseCallback() din React ne ajută să realizăm acest lucru prin amintirea funcțiilor pe care le definim și recreându-le doar atunci când este necesar.Acest lucru poate face site-ul web mai rapid și mai receptiv pentru utilizatori. React este cea mai populară bibliotecă JavaScript front-end, conform unui sondaj Stack Overflow din același an, sugerând că useCallback() este probabil utilizat pe scară largă în industrie.

În acest articol, vom explica ce este useCallBack() în React și cum să îl folosim în codul nostru React pentru a îmbunătăți performanța.

Ce se foloseșteCallBack în React?

useCallback() este o funcție hook furnizată de React care este folosită pentru a memoriza o funcție. Cu alte cuvinte, ajută la optimizarea performanței unei componente prin evitarea redării nedorite.

În React, atunci când starea unei componente sau suportul se modifică, componenta este redată din nou pentru a reflecta valorile actualizate. Acest proces este costisitor din punct de vedere computațional și poate scădea performanța aplicației dacă este tratat incorect. Aici este locul în care useCallback() este util.

Cu useCallback(), utilizatorii pot memoriza o funcție, ceea ce înseamnă că este redefinită numai atunci când dependențele sale se modifică. Acest lucru previne redarea inutilă a componentelor, optimizând astfel performanța aplicației.

Iată un exemplu -

const memoizedCallback = useCallback(

() => {

face ceva (a, b);

},

[a, b],

);

Deși începerea utilizării React prin tutoriale este o modalitate excelentă, urmărirea unui curs dinamic pentru a începe dezvoltarea vă poate ajuta în mod semnificativ să vă actualizați abilitățile. Consultați programul Executive Postuniversitar în Dezvoltare software – Specializare în cursul de dezvoltare Full Stack de la upGrad la kickstart!

Avantajele utilizării useCallBack()

Iată câteva avantaje ale utilizării React useCallBack() –

• useCallback() poate ajuta aplicațiile React să ruleze mai rapid, prevenind actualizările inutile ale componentelor.
• Dacă o componentă preia multe date și le arată ca un grafic, poate beneficia de useCallback().
• Dacă componenta părinte a graficului se actualizează, dar modificările nu afectează graficul, nu este nevoie să îl actualizați și să preluați din nou datele.
• Folosind useCallback() pentru a memoriza funcția de preluare a datelor, putem evita actualizările inutile și putem face aplicația mai rapidă și mai fluidă.
• Această optimizare poate îmbunătăți experiența utilizatorului, deoarece aplicația va funcționa mai rapid și mai eficient.

Consultațicursurile de dezvoltare software upGrad pentru a vă îmbunătăți abilitățile.

Sintaxa și parametrii useCallBack()

const memoizedCallback = useCallback(

() => {

Fă ceva();

},

[dependența1, dependența2]

);

În exemplu, cârligul useCallback() memorează funcția doSomething(), ceea ce înseamnă că memorează versiunea creată anterior. Funcția stocată în cache va fi utilizată numai la randările ulterioare, cu excepția cazului în care valoareadependency1 sau dependency2se modifică.

Dacă oricare dintre aceste dependențe se modifică, va fi creată o nouă versiune a funcțieidoSomething() și versiunea din cache va fi înlocuită cu cea nouă.Acest lucru ajută la optimizarea performanței aplicației prin prevenirea creării și redărilor inutile de funcții.

Diferența dintre useMemo() și useCallBack()

useCallback și useMemo sunt React Hooks care pot îmbunătăți performanța unei aplicații React prin memorarea valorilor. Ambele cârlige iau o funcție ca argument și returnează o versiune memorată a acelei funcții.

Iată diferența dintre cele două:

Scenarii când se utilizează useCallBack()

Iată scenariile când poate fi utilizat useCallBack() -

Optimizarea componentelor copil

useCallback React optimizează componentele copil care se bazează pe egalitatea de referință pentru a evita randările inutile, în special atunci când se transmit apeluri înapoi la aceste componente secundare.

Prevenirea redărilor inutile

React useCallback este deosebit de util atunci când aveți o componentă cu un element copil care este redat în mod repetat fără a avea nevoie de el. Puteți transmite o funcție de apel invers și o matrice de dependențe pentru a utilizaCallback pentru a preveni randările inutile.

Folosiți-vă șansa de a înțelege funcția useCallBack() în detaliu cu ajutorul cursului de bootcamp de dezvoltare software Full Stack de la upGrad.

Explorați cursurile noastre populare de inginerie software

Exemple de useCallBack()

Iată câteva exemple despre cum să implementați cârligul useCallBack().

useCallBack Exemplul 1

Atunci când o componentă părinte transmite o funcție ca suport unei componente secundare, redarea frecventă a părintei poate face ca componenta copil să fie redată din nou în mod inutil. În astfel de cazuri, folosiți useCallback pentru a memoriza funcția care poate ajuta la prevenirea acestor redări inutile.

import React, { useCallback } din 'react';

function ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('Buton apăsat');

}, []);

întoarcere (

<ChildComponent onClick={handleButtonClick} />

);

}

funcția ChildComponent({ onClick }) {

întoarcere (

<button onClick={onClick}>Dați clic pe mine</button>

);

}

useCallBack Exemplul 2

Să presupunem că aveți o funcție care efectuează calcule complexe pe un set de date mare. Dacă această funcție este apelată frecvent și durează mult timp pentru a se executa, poate cauza probleme de performanță în aplicația dvs. În acest scenariu, puteți utiliza useCallback pentru a memoriza funcția și pentru a preveni reexecuția inutilă a calculului.

import React, { useState, useCallback } din 'react';

function ParentComponent() {

const [date, setData] = useState([]);

const processData = useCallback(() => {

const processedData = „Date prelucrate”;

returnează date procesate;

}, [date]);

întoarcere (

<ChildComponent processData={processData} />

);

}

funcția ChildComponent({ processData }) {

rezultat const = procesData();

întoarcere (

<div>{rezultat}</div>

);

}

Reacționați optimizarea performanței utilizând useCallBack()

Un cârlig useCallback este un instrument puternic în React care vă permite să memorați o funcție, asigurându-vă că este refăcută numai atunci când una dintre dependențele sale este schimbată. Acest lucru este deosebit de benefic pentru funcțiile cu performanță intensivă care sunt apelate frecvent. Consultați exemplul de mai jos pentru a vedea cum poate fi utilizat -

import { useState, useEffect } din 'react';

function App() {

const [cuvânt, setCuvânt] = useState(„Bob”);

const say = () => console.log(`Cuvântul tău este: ${word}`);

useEffect(() => {

Spune();

}, [Spune]);

return <div>Bine ați venit!</div>;

}

Exemplul demonstrează că cârligul useEffect depinde de funcția say, ceea ce înseamnă că ar trebui să se declanșeze doar cu o schimbare a funcției. Cu toate acestea, datorită verificărilor de egalitate referențială React, spunem că funcția va fi întotdeauna evaluată ca fiind adevărată, chiar și în cazul în care nu există nicio modificare reală, rezultând randări inutile.

Callback-ul useEffect va fi folosit la fiecare randare, care nu este potrivit pentru performanță. O modalitate de a rezolva acest lucru este să mutați funcția în blocul useEffect, dar aceasta nu ar fi o soluție ideală, deoarece nu ați putea folosi funcția în niciun alt loc. Vezi mai jos acest exemplu -

import React, { useState, useEffect } din 'react';

function App() {

const [cuvânt, setCuvânt] = useState(„Bob”);

const say = () => console.log(`Cuvântul tău este: ${word}`);

useEffect(() => {

Spune();

}, [Spune]);

return <div>Bine ați venit!</div>;

}

O altă soluție este implementarea cârligului useCallback prin împachetarea funcției. Este esențial să ne amintim că funcția useCallback necesită o matrice de dependențe la fel ca useEffect. Dacă funcția preia orice variabilă, utilizatorii o pot transmite cu matricea; sau lăsați-l gol. Aici, deoarece funcția say se bazează pe cuvântul variabilă, o includem în matrice.

import {useState, useEffect,useCallback} din „react”

function App(){

const [word,setWord]=useState(„Bob”)

const say = useCallback(()=>console.log(`Cuvântul tău este: ${cuvânt}`),[cuvânt])

useEffect(()=>{

Spune()

},[Spune])

return <div>Bine ați venit!</div>

}

Când nu trebuie să utilizați useCallBack()

În timp ce useCallback() este un instrument util pentru optimizarea performanței în anumite scenarii, există și momente când este inutil sau chiar dăunător. Iată câteva exemple de când nu trebuie să utilizați useCallback():

• Când funcția este transmisă ca prop este deja o funcție pură care nu se bazează pe o stare externă.
• Când funcția este trecută ca prop, nu provoacă probleme de performanță și nu este apelată excesiv.
• Când funcția este transmisă ca prop, este folosită în mai multe locuri și trebuie să fie recreată de fiecare dată pentru a reflecta diferite comportamente sau dependențe.
• Când funcția este transmisă ca o prop face parte dintr-un arbore de componente mici, câștigul de performanță de la useCallback() ar fi neglijabil.
• Când funcția este transmisă ca prop este folosită ca un handler de evenimente și este apelată o singură dată.

În aceste cazuri, utilizarea useCallback() poate scădea efectiv performanța din cauza supraîncărcării de creare și menținere a apelului memorat. Este important să luați în considerare fiecare caz de utilizare cu atenție și să cântăriți beneficiile potențiale față de costurile potențiale înainte de a decide dacă să utilizați sau nu useCallback().

Abilități de dezvoltare software la cerere

Concluzie

Utilizarea useCallback poate fi un instrument puternic pentru optimizarea performanței aplicației dvs. React. Prin memorarea funcțiilor, pot fi evitate redări inutile, ceea ce duce la o experiență de utilizator mai fluidă și mai eficientă. Cu toate acestea, este important să utilizați useCallback în mod judicios și să înțelegeți scenariile când este cel mai eficient.

upGrad oferă un program de master în știință informatică care oferă o educație cuprinzătoare în domeniul informaticii, concentrându-se pe abilitățile relevante pentru industrie. Acest program este pentru orice persoană mai proaspătă sau mai experimentată pentru a-și îmbunătăți abilitățile de dezvoltare software. Cu acest curs, studenții vor fi mai mult decât pregătiți să-și îmbunătățească cariera în lumea reală și să devină experți în domeniile pe care le doresc.