Renderdus on React rakendustes tihti jõudluse oluline tegur. Kui komponendid renderdatakse ebavajalikult, võib see rakenduse märkimisväärset aeglustumist kaasa tuua. Selle probleemi vältimiseks pakub Reacti konksud nagu useCallback. Selles õpetuses saad teada, kuidas useCallbacki abil saad optimeerida oma komponentide renderdusjõudlust, eriti kui kasutatakse tagasikutsumisprope.
Peamised teadmised
- useCallback salvestab funktsiooni renderdustsüklite vahel.
- Õige useCallbacki kasutamine vähendab ebavajalikke renderdusi.
- useCallbacki kasutamisel tuleb alati jälgida sõltuvusi.
Samm-sammult juhend
1. Sissejuhatus tagasikutsumisproppidesse
Et mõista useCallbacki funktsiooni, tuleks selgitada tagasikutsumisproppide tähendust. Tagasikutsumispropid on funktsioonid, mis antakse edasi lapsekomponentidele. Meie näites on meil lihtne nupu komponent, mis saab propina funktsiooni, et teha mingi tegevus.
Selle struktuuriga kujutle, et lapsekomponendi renderdamisel luuakse ka tagasikutsumisfunktsioon pidevalt uuesti. See tähendab, et iga kord, kui vanemkomponenti uuesti renderdatakse, muudetakse ka tagasikutsumisfunktsiooni, isegi kui selle loogika ei muutu.
2. Implementatsioon ilma useCallbackita
Oletame, et sul on juba loodud nupu komponent ilma useCallbackita kasutamata. Sellisel juhul võib sinu kood välja näha järgmine: deklareerid klõpsufunktsiooni otse vanemkomponendis. Kui nüüd vanemkomponendi olek muutub, renderdatakse nupp uuesti ja seeläbi luuakse uuesti ka tagasikutsumisfunktsioon.
3. useCallbacki kasutuselevõtt
Siin tuleb mängu useCallback. useCallbacki abil saad "puhvritada" oma tagasikutsumisfunktsiooni, nii et see luuakse uuesti ainult siis, kui määratud sõltuvused muutuvad. Õige useCallbacki kasutamiseks pead oma tagasikutsumisfunktsiooni haakpesasse pakkima.
See tähendab, et algne funktsioon jäetakse meelde seni, kuni sõltuvused jäävad muutumatuks. See tähendab, et vanemkomponendi korduva renderdamise korral jääb alati alles vana funktsioon, kuni sõltuvused ei muutu.
4. Sõltuvuste määramine
See on oluline punkt, kui kasutad useCallbacki. Pead jälgima õigete sõltuvuste määramist tühjas massiivis. Kui oled funktsiooni muutujatega seotud, peaksid need muutujad olema sõltuvuste massiivis.
Kui oleksid teinud muudatusi olekus, mõistab React, et funktsioon tuleb uuesti luua, kuna üks määratud muutuvatest on muutunud.
5. Implementatsiooni testimine
Tagamaks, et implementatsioon toimib, saad rakendust brauseris testida. Kui klõpsad nuppu ilma useCallbackita kasutamata, näed, et nupp ja teised komponendid renderdatakse pidevalt uuesti.
Lisa nüüd useCallback ja vaata jõudlust. Kui kõik on õigesti rakendatud, peaks nupu renderdamine lõppema, kui prop enam ei muutu.
6. Eeliste ja puuduste hindamine
On oluline kaaluda useCallbacki kasutamist. Paljudel juhtudel võib selle kasutamine nõuda lisapingutusi ja võib juhtuda, et optimeerimine ei ole lihtsamates komponentides vajalik. Seega veendu, kas useCallbacki kasutamine on vajalik, võttes arvesse oma komponendi keerukust.
Märka, et useCallback toob tõesti eeliseid ka siis, kui kasutad Memo-optimeerimist. Muidu võid juurde pääseda ainult samale tagasikutsumisfunktsioonile, kuigi su komponent renderdatakse ikkagi uuesti.
Kokkuvõte
UseCallbacki rakendamine võimaldab sul vältida ebavajalikke renderdusi ja optimeerida oma Reacti rakenduse jõudlust. Veendu alati, et määratled õigeid sõltuvusi ning kaalu konksu kasutamist, lähtudes oma komponendi keerukusest.
Korduma kippuvad küsimused
Kuidas kasutada useCallback-i?useCallback salvestab funktsiooni renderdamiste vahel ja loob selle uuesti ainult siis, kui muutub üks sinu määratletud sõltuvustest.
Millal peaksin kasutama useCallback-i?Kasuta useCallback-i, kui sul on tagasikutsumise propertid ja need põhjustavad soovimatuid renderdamisi laste komponentides.
Kas mul on alati vaja useCallback-i iga funktsiooni jaoks?Ei, peaksid kasutama useCallback-i ainult siis, kui see on sinu rakenduse jõudluse jaoks oluline, eriti keerukamate ja sageli renderdavate komponentide puhul.
Milliseid sõltuvusi peaksin märkima?Märgi kõik muutujad, mida kasutatakse sinu tagasikutsumise funktsioonis ja mis võivad muutuda, sõltuvuste massiivis.
Kas ma saan kasutada useCallback-i iseseisvalt?Mitte tingimata. Kombinatsioon teiste haakidega nagu React.memo on sageli soovitatav, et saavutada soovitud jõudluse täiustused.
