Komponentu renderēšana lietojumprogrammā React bieži var radīt nevajadzīgas veiktspējas problēmas, īpaši tad, ja komponenti tiek atkārtoti atjaunināti, lai gan to rekvizīti nav mainījušies. Lūk, kā jūs varat optimizēt React lietojumprogrammu veiktspēju, izmantojot React memo funkciju. Izmantojot memo, varat nodrošināt, ka komponenti tiek atkārtoti atveidoti tikai tad, kad mainās attiecīgie dati. Tas ne tikai paātrina lietotāja saskarni, bet arī uzlabo reakcijas ātrumu uz lietotāja ievadītajiem datiem.
Galvenie secinājumi
- Funkcija memo novērš nevajadzīgus renderēšanas procesus.
- Komponenti tiek atkārtoti atveidoti tikai tad, kad mainās to rekvizīti.
- Optimizācija ir noderīga, ja komponentam ir sarežģīti aprēķini vai apakšiedaļas, kas ir jāattēlo.
Soli pa solim
Solis Nr. 1: Pamata iestatīšana
Lai sāktu optimizēt komponentus, ir nepieciešams vienkāršs piemērs. Vispirms React lietojumprogrammā izveidojiet divas pogas. Pirmā poga pārslēdz starp "X" un "O", bet otrā poga vienkārši parāda ziņojumu konsoles ekrānā.
Avota kodā definējiet pārslēgšanas pogu ar useState, lai saglabātu pašreizējo stāvokli un mainītu to ar katru klikšķi.
Solis Nr. 2: Analizējiet komponenta struktūru
Ja palaižat savu lietojumprogrammu pārlūkprogrammā un noklikšķināt uz pārslēgšanas pogas, jūs pamanīsiet, ka otrā poga konsoles ekrānā joprojām tiek atveidota. Iemesls tam ir tāds, ka React katru reizi, kad tiek mainīts stāvoklis, atkārtoti renderē visus ietekmētos komponentus, pat ja nekas nav mainījies.
Lai gan otrajai pogai nav rekvizītu, tiek izsaukta tās renderēšanas funkcija, kas nav optimāli. Jūs vēlaties, lai poga tiktu pārrenderēta tikai tad, kad tas patiešām ir nepieciešams.
3. solis: Ievads memuārā
Šeit ir vieta, kur sāk darboties memo. Jūs varat optimizēt pogas komponentu, importējot memo no React. Tas nodrošina, ka komponenta renderēšanas funkcija vairs netiek izsaukta, kamēr nemainās rekvizīti.
4. solis: memo izmantošana
Aptiniet savu pogas komponentu ar memo, aptinot funkcijas izsaukumu ap pogas komponentu. Tagad komponentei ir iespēja tikt atkārtoti atveidotai tikai tad, kad mainās rekvizīti.
Pēc tam pārbaudiet, vai optimizācija darbojas. Pārlādējot programmu un noklikšķinot uz pārslēgšanas pogas, pogai vairs nevajadzētu tikt atkārtoti atveidotai, ja vien rekvizīti nemainās. Varat arī iestatīt pārtraukuma punktus, lai pārbaudītu, vai tiek izsaukta renderēšanas funkcija.
posms: optimizācijas testēšana
Lai pārbaudītu efektivitāti, varat nodot pogai papildu rekvizītus, pogas komponentā parādot pārslēgšanas vērtību. Pievienojiet loģiku, kas maina pogas tekstu, pamatojoties uz pārslēgšanas statusu.
Ja tagad vēlreiz testēsiet lietojumprogrammu un pārslēgsieties starp pogām, redzēsiet, ka poga tiek atveidota tikai tad, kad mainās pārslēgšanas rekvizīts. Tas parāda, kā darbojas optimizācija.
Solis Nr. 6: izmaiņu pārbaude
Ja tagad vēlreiz noklikšķināsiet uz pārslēgšanas pogas un pārslēgšanas poga mainīsies no false uz true, pogas komponents tiks pareizi atveidots no jauna, jo tā rekvizīti mainīsies pārslēgšanas vērtības pārneses dēļ.
Secinājums
Tagad jūs esat veiksmīgi ieviesuši piemiņas funkciju un optimizējuši savu pogas komponentu tā, lai tas tiktu pārrenderēts tikai tad, kad tas patiešām ir nepieciešams. Šī ir vienkārša, bet efektīva metode React lietojumprogrammas veiktspējas optimizēšanai.
Kopsavilkums
Šajā rokasgrāmatā jūs uzzinājāt, kā izmantot memo, lai optimizētu React komponentu renderēšanas veiktspēju. Jūs uzzinājāt, kad ir lietderīgi optimizēt komponentus un kā jūs varat samazināt renderēšanas funkcijas izsaukšanas biežumu.
Biežāk uzdotie jautājumi
Kā memo darbojas React? memo saglabā komponenta rezultātu un atkārtoti to renderē tikai tad, kad mainās tā rekvizīti.
Kad man vajadzētu izmantot memo? memo ir noderīgs komponentēm, kas veic daudz renderēšanas darbu vai atrodas lielākās lietojumprogrammās ar daudzām stāvokļa izmaiņām.
Vai es varu izmantot memo katrai komponentei? tas ne vienmēr ir nepieciešams. Izmantojiet memo, ja tas ievērojami uzlabo veiktspēju, īpaši sarežģītām sastāvdaļām.
