Mokytis ir suprasti React – praktinė pamoka

Komponentų optimizavimas naudojant useCallback sistemoje "React

Visi pamokos vaizdo įrašai Mokytis ir suprasti „React“ – praktinis vadovas

Atvaizdavimo procesas "React" programose dažnai yra lemiamas našumo veiksnys. Jei komponentai atvaizduojami be reikalo, gali pastebimai sulėtėti programos veikimas. Kad išvengtumėte šios problemos, "React" siūlo kabliukus, tokius kaip useCallback. Šioje pamokoje sužinosite, kaip naudotiCallback, kad optimizuotumėte savo komponentų atvaizdavimo našumą, ypač kai naudojami grįžtamojo ryšio rekvizitai.

Pagrindinės žinios

  • UseCallback išsaugo funkciją tarp atvaizdavimo ciklų.
  • Teisingas useCallback naudojimas sumažina nereikalingų atvaizdavimų skaičių.
  • Naudodami useCallback visada atkreipkite dėmesį į priklausomybes.

Žingsnis po žingsnio

1. Įvadas į grįžtamojo ryšio rekvizitus

Kad suprastumėte useCallback funkciją, pirmiausia turėtumėte išsiaiškinti grįžtamojo ryšio rekvizitų reikšmę. Atgalinio ryšio rekvizitai yra funkcijos, kurios perduodamos antriniams komponentams. Mūsų pavyzdyje turime paprastą mygtuko komponentą, kuris gauna funkciją kaip rekvizitą veiksmui atlikti.

Komponentų optimizavimas naudojant useCallback sistemoje "React

Turėdami tokią struktūrą, įsivaizduokite, kad atvaizduojant pavaldųjį komponentą taip pat vis iš naujo generuojama grįžtamojo ryšio funkcija. Tai reiškia, kad kiekvieną kartą iš naujo atvaizduojant tėvinį komponentą, grįžtamojo ryšio funkcija taip pat pasikeičia, net jei jo logika nesikeičia.

2. Įgyvendinimas be useCallback

Tarkime, kad jau sukūrėte savo mygtuko komponentą nenaudodami useCallback. Tokiu atveju jūsų kodas gali atrodyti taip: funkciją onClick deklaruojate tiesiogiai patronuojančiame komponente. Pasikeitus patronuojančio komponento būsenai, mygtukas iš naujo atvaizduojamas ir vėl sukuriama grįžtamojo ryšio funkcija.

3. UseCallback įvedimas

Šioje vietoje atsiranda funkcija useCallback. Naudodami useCallback galite "pasidėti į talpyklą" savo atgalinio iškvietimo funkciją, kad ji būtų atkuriama tik tada, kai pasikeičia nurodytos priklausomybės. Kad galėtumėte tinkamai naudoti useCallback, turite savo grįžtamojo ryšio funkciją apgaubti kabliuku.

Dėl to pradinė funkcija bus atsimenama tol, kol priklausomybės išliks nepakitusios. Tai reiškia, kad jei tėvinis komponentas atvaizduojamas pakartotinai, senoji funkcija visada išlieka tol, kol nesikeičia priklausomybės.

4. apibrėžkite priklausomybes

Tai taip pat yra esminis momentas naudojant useCallback. Privalote užtikrinti, kad tuščiame masyve apibrėžtumėte teisingas priklausomybes. Jei funkciją susiejote su kintamaisiais, šie kintamieji turėtų būti priklausomybių masyve.

Jei bus atlikti būsenos pakeitimai, "React" supras, kad funkciją reikia atkurti, nes pasikeitė vienas iš nurodytų kintamųjų.

5. įgyvendinimo testavimas

Norėdami įsitikinti, kad įgyvendinimas veikia, galite išbandyti programą naršyklėje. Jei spustelėsite mygtuką nenaudodami useCallback, pamatysite, kad mygtukas ir kiti komponentai atvaizduojami vis iš naujo.

Komponentų optimizavimas naudojant useCallback sistemoje "React

Dabar pridėkite useCallback ir patikrinkite veikimą. Jei viskas įgyvendinta teisingai, mygtukas turėtų nustoti atvaizduoti, kai rekvizitas nustoja keistis.

6. pasverkite privalumus ir trūkumus

Svarbu pasverti useCallback naudojimą. Daugeliu atvejų jo naudojimas reikalauja papildomų pastangų, todėl gali būti, kad paprastesniuose komponentuose optimizavimas nebūtinas. Taigi patikrinkite, ar verta naudoti useCallback, atsižvelgdami į savo komponentų sudėtingumą.

Komponentų optimizavimas naudojant useCallback sistemoje "React

Atkreipkite dėmesį, kad useCallback tikrai naudingas, jei taip pat naudojate memo optimizavimą. Priešingu atveju galite naudotis tik ta pačia grįžtamojo ryšio funkcija, o jūsų komponentas vis dar iš naujo ir iš naujo atvaizduojamas.

Optimierung von Komponenten mit useCallback in React

Apibendrinimas

Įgyvendindami useCallback galite išvengti nereikalingo atvaizdavimo ir optimizuoti savo "React" programos našumą. Visada įsitikinkite, kad apibrėžėte tinkamas priklausomybes, ir apsvarstykite kabliuko naudojimą priklausomai nuo jūsų komponento sudėtingumo.