React lietojumprogrammu renderēšanas process bieži vien ir izšķirošais veiktspējas faktors. Ja komponenti tiek atveidoti nevajadzīgi, tas var ievērojami palēnināt lietojumprogrammas darbību. Lai izvairītos no šīs problēmas, React piedāvā tādus āķus kā useCallback. Šajā pamācībā uzzināsiet, kā izmantotCallback, lai optimizētu komponentu renderēšanas veiktspēju, jo īpaši tad, ja tiek izmantoti izsaukuma atsaukšanas rekvizīti.
Galvenās atziņas
- useCallback saglabā funkciju starp renderēšanas cikliem.
- Pareiza useCallback izmantošana samazina nevajadzīgu renderēšanu.
- Izmantojot useCallback, vienmēr pievērsiet uzmanību atkarībām.
Soli pa solim
1. Iepazīstināšana ar atsaukšanas rekvizītiem
Lai izprastu useCallback funkciju, vispirms jānoskaidro atsaukšanas rekvizītu nozīme. Atgriezenisko zvanu rekvizīti ir funkcijas, kas tiek nodotas atvasinātajām sastāvdaļām. Mūsu piemērā mums ir vienkārša pogas komponente, kas kā rekvizītu saņem funkciju, lai izpildītu darbību.
Izmantojot šo struktūru, iedomājieties, ka, kad tiek atveidota atvasinātā komponente, atkal un atkal tiek ģenerēta arī atpakaļsaukuma funkcija. Tas nozīmē, ka ikreiz, kad vecākā komponente tiek atkārtoti atveidota, tiek mainīta arī izsaukuma atgriezeniskā funkcija, pat ja tās loģika nemainās.
2. implementācija bez useCallback
Pieņemsim, ka jau esat izveidojis pogas komponentu, neizmantojot useCallback. Šādā gadījumā jūsu kods var izskatīties šādi: jūs deklarējat onClick funkciju tieši vecākajā komponentē. Ja vecākās sastāvdaļas statuss mainās, poga tiek izkadrēta no jauna, un atgriezeniskā saite funkcija tiek izveidota no jauna.
3. useCallback ieviešana
Šeit ir vieta, kur sāk darboties useCallback. Izmantojot useCallback, jūs varat "kešēt" savu atpakaļsaukuma funkciju, lai tā tiktu reģenerēta tikai tad, kad mainās norādītās atkarības. Lai pareizi izmantotu useCallback, ir nepieciešams savu izsaukuma funkciju ietīt āķī.
Tādējādi sākotnējā funkcija tiek atcerēta tik ilgi, kamēr atkarības paliek nemainīgas. Tas nozīmē, ka, ja vecāka komponente tiek atkārtoti atveidota, vecā funkcija vienmēr tiek saglabāta, kamēr vien atkarības nemainās.
4. definēt atkarības
Šis ir arī izšķirošais punkts, kad izmantojat useCallback. Jums ir jānodrošina, lai tukšajā masīvā tiktu definētas pareizās atkarības. Ja esat piesaistījis funkciju mainīgajiem, šiem mainīgajiem jābūt atkarību masīvā.
Ja tiks veiktas izmaiņas stāvoklī, React sapratīs, ka funkcija ir jāreģenerē, jo ir mainījies kāds no norādītajiem mainīgajiem.
5. Implementācijas testēšana
Lai pārliecinātos, ka implementācija darbojas, varat testēt lietojumprogrammu pārlūkprogrammā. Ja noklikšķināsiet uz pogas, neizmantojot useCallback, redzēsiet, ka poga un citi komponenti tiek atveidoti atkal un atkal.
Tagad pievienojiet useCallback un pārbaudiet veiktspēju. Ja viss ir īstenots pareizi, pogai jāpārtrauc atveidot, kad rekvizīts pārstāj mainīties.
6. Nosveriet visus par un pret
Ir svarīgi izsvērt useCallback izmantošanu. Daudzos gadījumos tās izmantošana prasa papildu pūles, un var gadīties, ka vienkāršākos komponentos optimizācija nav nepieciešama. Tāpēc pārbaudiet, vai ir vērts izmantot useCallback, pamatojoties uz jūsu komponentu sarežģītību.
Ņemiet vērā, ka useCallback ir patiešām izdevīgs, ja izmantojat arī memo optimizāciju. Pretējā gadījumā jūs varat tikai piekļūt vienai un tai pašai atgriezeniskās saites funkcijai, kamēr jūsu komponente tiek atkal un atkal atveidota.
Kopsavilkums
Izmantojot useCallback, varat izvairīties no nevajadzīgas atveidošanas un optimizēt React lietojumprogrammas veiktspēju. Vienmēr pārliecinieties, ka esat definējis pareizās atkarības, un apsveriet āķa izmantošanu atkarībā no jūsu komponenta sarežģītības.
Biežāk uzdotie jautājumi
Kā darbojas useCallback? useCallback saglabā funkciju starp renderēšanas cikliem un atjauno to tikai tad, kad mainās norādītā atkarība.
Kad man vajadzētu izmantot useCallback? Izmantojiet useCallback, ja jums ir atpakaļsaukuma rekvizīti un šie rekvizīti izraisa nevēlamu atveidošanu atvasinātajos komponentos.
Vai man vienmēr ir nepieciešams useCallback katrai funkcijai? nē, jums vajadzētu izmantot useCallback tikai tad, ja tas palīdz jūsu lietojumprogrammas veiktspējai, jo īpaši sarežģītākiem un bieži atveidojamiem komponentiem.
Kādas atkarības man jānorāda? Norādietvisus mainīgos, kas tiek izmantoti jūsu atpakaļsaukuma funkcijā un var mainīties atkarību masīvā.
Vai es varu izmantot useCallback atsevišķi? ne vienmēr. Bieži vien ir ieteicama kombinācija ar citiem āķiem, piemēram, React.memo, lai panāktu vēlamos veiktspējas uzlabojumus.
