Izpētiet progresīvas React memoizācijas tehnikas, lai optimizētu veiktspēju globālās lietotnēs. Uzziniet, kad un kā lietot React.memo, useCallback, useMemo un citas funkcijas, lai veidotu efektīvas lietotāja saskarnes.
React Memo: padziļināta izpēte optimizācijas tehnikām globālām lietotnēm
React ir jaudīga JavaScript bibliotēka lietotāja saskarņu veidošanai, bet, lietotnēm kļūstot sarežģītākām, veiktspējas optimizācija kļūst izšķiroša. Viens no būtiskiem rīkiem React optimizācijas rīkkopā ir React.memo. Šis emuāra ieraksts sniedz visaptverošu ceļvedi, kā saprast un efektīvi izmantot React.memo un saistītās tehnikas, lai veidotu augstas veiktspējas React lietotnes globālai auditorijai.
Kas ir React.memo?
React.memo ir augstākas kārtas komponents (HOC), kas memoizē funkcionālu komponentu. Vienkāršāk sakot, tas novērš komponenta pārrenderēšanu, ja tā rekvizīti (props) nav mainījušies. Pēc noklusējuma tas veic seklu rekvizītu salīdzināšanu. Tas var ievērojami uzlabot veiktspēju, īpaši komponentiem, kuru renderēšana ir skaitļošanas ziņā dārga vai kuri bieži tiek pārrenderēti pat tad, ja to rekvizīti paliek nemainīgi.
Iedomājieties komponentu, kas attēlo lietotāja profilu. Ja lietotāja informācija (piemēram, vārds, avatārs) nav mainījusies, nav nepieciešams komponentu pārrenderēt. React.memo ļauj jums izlaist šo nevajadzīgo pārrenderēšanu, ietaupot vērtīgu apstrādes laiku.
Kāpēc izmantot React.memo?
Šeit ir galvenie ieguvumi, izmantojot React.memo:
- Veiktspējas uzlabošana: Novērš nevajadzīgas pārrenderēšanas, nodrošinot ātrākas un plūdenākas lietotāja saskarnes.
- Samazināts CPU lietojums: Mazāk pārrenderēšanu nozīmē mazāku CPU noslodzi, kas ir īpaši svarīgi mobilajām ierīcēm un lietotājiem reģionos ar ierobežotu joslas platumu.
- Labāka lietotāja pieredze: Atsaucīgāka lietotne nodrošina labāku lietotāja pieredzi, īpaši lietotājiem ar lēnākiem interneta savienojumiem vai vecākām ierīcēm.
React.memo pamata lietojums
Lietot React.memo ir vienkārši. Vienkārši ietiniet savu funkcionālo komponentu tajā:
import React from 'react';
const MyComponent = (props) => {
console.log('MyComponent rendered');
return (
{props.data}
);
};
export default React.memo(MyComponent);
Šajā piemērā MyComponent tiks pārrenderēts tikai tad, ja mainīsies data rekvizīts. console.log paziņojums palīdzēs jums pārbaudīt, kad komponents faktiski tiek pārrenderēts.
Izpratne par seklo salīdzināšanu
Pēc noklusējuma React.memo veic seklu rekvizītu salīdzināšanu. Tas nozīmē, ka tas pārbauda, vai rekvizītu atsauces ir mainījušās, nevis pašas vērtības. To ir svarīgi saprast, strādājot ar objektiem un masīviem.
Apsveriet šādu piemēru:
import React, { useState } from 'react';
const MyComponent = (props) => {
console.log('MyComponent rendered');
return (
{props.data.name}
);
};
const MemoizedComponent = React.memo(MyComponent);
const App = () => {
const [user, setUser] = useState({ name: 'John', age: 30 });
const handleClick = () => {
setUser({ ...user }); // Tiek izveidots jauns objekts ar tām pašām vērtībām
};
return (
Šajā gadījumā, lai gan user objekta vērtības (name un age) paliek nemainīgas, handleClick funkcija katru reizi, kad tā tiek izsaukta, izveido jaunu objekta atsauci. Tāpēc React.memo redzēs, ka data rekvizīts ir mainījies (jo objekta atsauce ir cita), un pārrenderēs MyComponent.
Pielāgota salīdzināšanas funkcija
Lai risinātu seklās salīdzināšanas problēmu ar objektiem un masīviem, React.memo ļauj nodrošināt pielāgotu salīdzināšanas funkciju kā otro argumentu. Šī funkcija pieņem divus argumentus: prevProps un nextProps. Tai ir jāatgriež true, ja komponentam *nav* jāpārrenderējas (t.i., rekvizīti būtībā ir vienādi), un false, ja tam ir jāpārrenderējas.
Šādi varat izmantot pielāgotu salīdzināšanas funkciju iepriekšējā piemērā:
import React, { useState, memo } from 'react';
const MyComponent = (props) => {
console.log('MyComponent rendered');
return (
{props.data.name}
);
};
const areEqual = (prevProps, nextProps) => {
return prevProps.data.name === nextProps.data.name && prevProps.data.age === nextProps.data.age;
};
const MemoizedComponent = memo(MyComponent, areEqual);
const App = () => {
const [user, setUser] = useState({ name: 'John', age: 30 });
const handleClick = () => {
setUser({ ...user });
};
return (
Šajā atjauninātajā piemērā areEqual funkcija salīdzina user objektu name un age īpašības. MemoizedComponent tagad tiks pārrenderēts tikai tad, ja mainīsies name vai age.
Kad lietot React.memo
React.memo ir visefektīvākais šādos scenārijos:
- Komponenti, kas bieži saņem tos pašus rekvizītus: Ja komponenta rekvizīti reti mainās,
React.memoizmantošana var novērst nevajadzīgas pārrenderēšanas. - Komponenti, kuru renderēšana ir skaitļošanas ziņā dārga: Komponentiem, kas veic sarežģītus aprēķinus vai renderē lielu datu apjomu, pārrenderēšanas izlaišana var ievērojami uzlabot veiktspēju.
- Tīri funkcionāli komponenti: Komponenti, kas rada vienu un to pašu izvadi vienai un tai pašai ievadei, ir ideāli kandidāti
React.memoizmantošanai.
Tomēr ir svarīgi atzīmēt, ka React.memo nav universāls risinājums. Tā neapdomīga lietošana faktiski var pasliktināt veiktspēju, jo arī seklajai salīdzināšanai ir sava cena. Tāpēc ir ļoti svarīgi profilēt savu lietotni un identificēt komponentus, kuriem memoizācija sniegtu vislielāko labumu.
Alternatīvas React.memo
Lai gan React.memo ir spēcīgs rīks, tā nav vienīgā iespēja React komponentu veiktspējas optimizēšanai. Šeit ir dažas alternatīvas un papildinošas tehnikas:
1. PureComponent
Klasēm balstītiem komponentiem PureComponent nodrošina līdzīgu funkcionalitāti kā React.memo. Tas veic seklu gan rekvizītu, gan stāvokļa salīdzināšanu un pārrenderē tikai tad, ja ir izmaiņas.
import React from 'react';
class MyComponent extends React.PureComponent {
render() {
console.log('MyComponent rendered');
return (
{this.props.data}
);
}
}
export default MyComponent;
PureComponent ir ērta alternatīva manuālai shouldComponentUpdate ieviešanai, kas bija tradicionālais veids, kā novērst nevajadzīgas pārrenderēšanas klašu komponentos.
2. shouldComponentUpdate
shouldComponentUpdate ir dzīves cikla metode klašu komponentos, kas ļauj definēt pielāgotu loģiku, lai noteiktu, vai komponentam vajadzētu pārrenderēties. Tā nodrošina vislielāko elastību, bet prasa arī vairāk manuāla darba.
import React from 'react';
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.data !== this.props.data;
}
render() {
console.log('MyComponent rendered');
return (
{this.props.data}
);
}
}
export default MyComponent;
Lai gan shouldComponentUpdate joprojām ir pieejams, PureComponent un React.memo parasti tiek dota priekšroka to vienkāršības un lietošanas ērtuma dēļ.
3. useCallback
useCallback ir React āķis (hook), kas memoizē funkciju. Tas atgriež memoizētu funkcijas versiju, kas mainās tikai tad, ja kāda no tās atkarībām ir mainījusies. Tas ir īpaši noderīgi, nododot atzvanus (callbacks) kā rekvizītus memoizētiem komponentiem.
Apsveriet šādu piemēru:
import React, { useState, useCallback, memo } from 'react';
const MyComponent = (props) => {
console.log('MyComponent rendered');
return (
);
};
const MemoizedComponent = memo(MyComponent);
const App = () => {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
Count: {count}
);
};
export default App;
Šajā piemērā useCallback nodrošina, ka handleClick funkcija mainās tikai tad, kad mainās count stāvoklis. Bez useCallback katrā App renderēšanas reizē tiktu izveidota jauna funkcija, liekot MemoizedComponent nevajadzīgi pārrenderēties.
4. useMemo
useMemo ir React āķis (hook), kas memoizē vērtību. Tas atgriež memoizētu vērtību, kas mainās tikai tad, ja kāda no tās atkarībām ir mainījusies. Tas ir noderīgi, lai izvairītos no dārgiem aprēķiniem, kas nav jāveic katrā renderēšanas reizē.
import React, { useState, useMemo } from 'react';
const App = () => {
const [input, setInput] = useState('');
const expensiveCalculation = (str) => {
console.log('Calculating...');
let result = 0;
for (let i = 0; i < str.length * 1000000; i++) {
result++;
}
return result;
};
const memoizedResult = useMemo(() => expensiveCalculation(input), [input]);
return (
setInput(e.target.value)} />
Result: {memoizedResult}
);
};
export default App;
Šajā piemērā useMemo nodrošina, ka expensiveCalculation funkcija tiek izsaukta tikai tad, kad mainās input stāvoklis. Tas novērš aprēķina atkārtošanu katrā renderēšanas reizē, kas var ievērojami uzlabot veiktspēju.
Praktiski piemēri globālām lietotnēm
Apskatīsim dažus praktiskus piemērus, kā React.memo un saistītās tehnikas var pielietot globālās lietotnēs:
1. Valodu atlasītājs
Valodu atlasītāja komponents bieži renderē pieejamo valodu sarakstu. Šis saraksts var būt relatīvi statisks, kas nozīmē, ka tas nemainās bieži. React.memo izmantošana var novērst valodu atlasītāja nevajadzīgu pārrenderēšanu, kad tiek atjauninātas citas lietotnes daļas.
import React, { memo } from 'react';
const LanguageItem = ({ language, onSelect }) => {
console.log(`LanguageItem ${language} rendered`);
return (
onSelect(language)}>{language}
);
};
const MemoizedLanguageItem = memo(LanguageItem);
const LanguageSelector = ({ languages, onSelect }) => {
return (
{languages.map((language) => (
);
};
export default LanguageSelector;
Šajā piemērā MemoizedLanguageItem tiks pārrenderēts tikai tad, ja mainīsies language vai onSelect rekvizīts. Tas var būt īpaši noderīgi, ja valodu saraksts ir garš vai ja onSelect apstrādātājs ir sarežģīts.
2. Valūtas konvertētājs
Valūtas konvertētāja komponents var attēlot valūtu sarakstu un to maiņas kursus. Maiņas kursi var tikt periodiski atjaunināti, bet valūtu saraksts var palikt relatīvi stabils. React.memo izmantošana var novērst valūtu saraksta nevajadzīgu pārrenderēšanu, kad tiek atjaunināti maiņas kursi.
import React, { memo } from 'react';
const CurrencyItem = ({ currency, rate, onSelect }) => {
console.log(`CurrencyItem ${currency} rendered`);
return (
onSelect(currency)}>{currency} - {rate}
);
};
const MemoizedCurrencyItem = memo(CurrencyItem);
const CurrencyConverter = ({ currencies, onSelect }) => {
return (
{Object.entries(currencies).map(([currency, rate]) => (
);
};
export default CurrencyConverter;
Šajā piemērā MemoizedCurrencyItem tiks pārrenderēts tikai tad, ja mainīsies currency, rate vai onSelect rekvizīts. Tas var uzlabot veiktspēju, ja valūtu saraksts ir garš vai ja maiņas kursu atjauninājumi ir bieži.
3. Lietotāja profila attēlošana
Lietotāja profila attēlošana ietver statiskas informācijas, piemēram, vārda, profila attēla un, iespējams, biogrāfijas, parādīšanu. Izmantojot `React.memo`, tiek nodrošināts, ka komponents tiek pārrenderēts tikai tad, kad lietotāja dati patiešām mainās, nevis katrā vecākkomponenta atjaunināšanas reizē.
import React, { memo } from 'react';
const UserProfile = ({ user }) => {
console.log('UserProfile rendered');
return (
{user.name}
{user.bio}
);
};
export default memo(UserProfile);
Tas ir īpaši noderīgi, ja `UserProfile` ir daļa no lielāka, bieži atjaunināta informācijas paneļa vai lietotnes, kur paši lietotāja dati nemainās bieži.
Biežākās kļūdas un kā no tām izvairīties
Lai gan React.memo ir vērtīgs optimizācijas rīks, ir svarīgi apzināties biežākās kļūdas un to, kā no tām izvairīties:
- Pārmērīga memoizācija: Neapdomīga
React.memolietošana var faktiski pasliktināt veiktspēju, jo arī seklajai salīdzināšanai ir sava cena. Memoizējiet tikai tos komponentus, kuriem tas, visticamāk, dos labumu. - Nepareizi atkarību masīvi: Lietojot
useCallbackunuseMemo, pārliecinieties, ka norādāt pareizus atkarību masīvus. Atkarību izlaišana vai nevajadzīgu atkarību iekļaušana var izraisīt neparedzētu uzvedību un veiktspējas problēmas. - Rekvizītu mainīšana (mutating): Izvairieties no tiešas rekvizītu mainīšanas, jo tas var apiet
React.memoseklo salīdzināšanu. Atjauninot rekvizītus, vienmēr izveidojiet jaunus objektus vai masīvus. - Sarežģīta salīdzināšanas loģika: Izvairieties no sarežģītas salīdzināšanas loģikas pielāgotajās salīdzināšanas funkcijās, jo tas var neitralizēt
React.memosniegtos veiktspējas ieguvumus. Saglabājiet salīdzināšanas loģiku pēc iespējas vienkāršāku un efektīvāku.
Jūsu lietotnes profilēšana
Labākais veids, kā noteikt, vai React.memo faktiski uzlabo veiktspēju, ir profilēt savu lietotni. React piedāvā vairākus profilēšanas rīkus, tostarp React DevTools Profiler un React.Profiler API.
React DevTools Profiler ļauj ierakstīt jūsu lietotnes veiktspējas datus un identificēt komponentus, kas tiek bieži pārrenderēti. React.Profiler API ļauj programmatiski izmērīt konkrētu komponentu renderēšanas laiku.
Profilējot savu lietotni, jūs varat identificēt komponentus, kuriem memoizācija sniegtu vislielāko labumu, un nodrošināt, ka React.memo faktiski uzlabo veiktspēju.
Noslēgums
React.memo ir spēcīgs rīks React komponentu veiktspējas optimizēšanai. Novēršot nevajadzīgas pārrenderēšanas, tas var uzlabot jūsu lietotņu ātrumu un atsaucību, nodrošinot labāku lietotāja pieredzi. Tomēr ir svarīgi lietot React.memo apdomīgi un profilēt savu lietotni, lai pārliecinātos, ka tas patiešām uzlabo veiktspēju.
Izprotot šajā emuāra ierakstā apspriestos jēdzienus un tehnikas, jūs varat efektīvi izmantot React.memo un saistītās tehnikas, lai veidotu augstas veiktspējas React lietotnes globālai auditorijai, nodrošinot, ka jūsu lietotnes ir ātras un atsaucīgas lietotājiem visā pasaulē.
Atcerieties ņemt vērā globālos faktorus, piemēram, tīkla latentumu un ierīču iespējas, optimizējot savas React lietotnes. Koncentrējoties uz veiktspēju un pieejamību, jūs varat izveidot lietotnes, kas nodrošina lielisku pieredzi visiem lietotājiem neatkarīgi no viņu atrašanās vietas vai ierīces.