React Memo: Išsami Optimizavimo Metodų Analizė Pasaulinėms Programoms

React yra galinga JavaScript biblioteka, skirta kurti vartotojo sąsajas, tačiau programoms tampant vis sudėtingesnėms, našumo optimizavimas tampa lemiamu veiksniu. Vienas iš esminių įrankių React optimizavimo priemonių rinkinyje yra React.memo. Šiame tinklaraščio įraše pateikiamas išsamus vadovas, kaip suprasti ir efektyviai naudoti React.memo bei susijusias technikas, siekiant sukurti aukšto našumo React programas, skirtas pasaulinei auditorijai.

Kas yra React.memo?

React.memo yra aukštesnės eilės komponentas (angl. Higher-Order Component, HOC), kuris memoizuoja funkcinį komponentą. Paprasčiau tariant, jis neleidžia komponentui persikrauti, jei jo savybės (props) nepasikeitė. Pagal numatytuosius nustatymus jis atlieka paviršutinišką savybių palyginimą. Tai gali žymiai pagerinti našumą, ypač komponentams, kurių atvaizdavimas yra skaičiavimų požiūriu brangus arba kurie dažnai persikrauna, net kai jų savybės išlieka tos pačios.

Įsivaizduokite komponentą, rodantį vartotojo profilį. Jei vartotojo informacija (pvz., vardas, avataras) nepasikeitė, nereikia iš naujo atvaizduoti komponento. React.memo leidžia praleisti šį nereikalingą persikrovimą, taupant brangų apdorojimo laiką.

Kodėl naudoti React.memo?

Štai pagrindiniai React.memo naudojimo privalumai:

• Našumo pagerinimas: Apsaugo nuo nereikalingų persikrovimų, todėl vartotojo sąsajos veikia greičiau ir sklandžiau.
• Sumažintas CPU naudojimas: Mažiau persikrovimų reiškia mažesnį CPU naudojimą, o tai ypač svarbu mobiliesiems įrenginiams ir vartotojams vietovėse su ribotu interneto pralaidumu.
• Geresnė vartotojo patirtis: Jautresnė programa suteikia geresnę vartotojo patirtį, ypač vartotojams su lėtesniu interneto ryšiu ar senesniais įrenginiais.

Pagrindinis React.memo naudojimas

Naudoti React.memo yra paprasta. Tiesiog apgaubkite juo savo funkcinį komponentą:

import React from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
{props.data}
 );
};

export default React.memo(MyComponent);

Šiame pavyzdyje MyComponent persikraus tik tada, jei pasikeis data savybė. console.log sakinys padės jums patikrinti, kada komponentas iš tikrųjų persikrauna.

Paviršutiniško palyginimo supratimas

Pagal numatytuosius nustatymus React.memo atlieka paviršutinišką savybių palyginimą. Tai reiškia, kad jis tikrina, ar pasikeitė nuorodos į savybes, o ne pačios reikšmės. Tai svarbu suprasti dirbant su objektais ir masyvais.

Apsvarstykite šį pavyzdį:

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 }); // Sukuriamas naujas objektas su tomis pačiomis reikšmėmis
 };

 return (
 

 
 Update User
 
 );
};

export default App;

Šiuo atveju, nors user objekto reikšmės (name ir age) išlieka tos pačios, handleClick funkcija kiekvieną kartą ją iškvietus sukuria naują objekto nuorodą. Todėl React.memo matys, kad data savybė pasikeitė (nes objekto nuoroda yra kitokia) ir persikraus MyComponent.

Pasirinktinė palyginimo funkcija

Norint išspręsti paviršutiniško palyginimo problemą su objektais ir masyvais, React.memo leidžia pateikti pasirinktinę palyginimo funkciją kaip antrąjį argumentą. Ši funkcija priima du argumentus: prevProps ir nextProps. Ji turėtų grąžinti true, jei komponentas *neturėtų* persikrauti (t. y., savybės iš esmės yra tos pačios), ir false, jei jis turėtų persikrauti.

Štai kaip galite naudoti pasirinktinę palyginimo funkciją ankstesniame pavyzdyje:

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 (
 

 
 Update User
 
 );
};

export default App;

Šiame atnaujintame pavyzdyje areEqual funkcija palygina user objektų name ir age savybes. Dabar MemoizedComponent persikraus tik tada, jei pasikeis name arba age.

Kada naudoti React.memo

React.memo yra efektyviausias šiais atvejais:

• Komponentai, kurie dažnai gauna tas pačias savybes: Jei komponento savybės retai keičiasi, React.memo naudojimas gali išvengti nereikalingų persikrovimų.
• Komponentai, kurių atvaizdavimas yra skaičiavimų požiūriu brangus: Komponentams, kurie atlieka sudėtingus skaičiavimus arba atvaizduoja didelius duomenų kiekius, persikrovimų praleidimas gali žymiai pagerinti našumą.
• Grynieji funkciniai komponentai: Komponentai, kurie sukuria tą patį rezultatą su ta pačia įvestimi, yra idealūs kandidatai React.memo.

Tačiau svarbu pažymėti, kad React.memo nėra universalus sprendimas. Beatodairiškas jo naudojimas gali pakenkti našumui, nes pats paviršutiniškas palyginimas turi savo kainą. Todėl būtina profiliuoti savo programą ir nustatyti komponentus, kuriems memoizacija duotų didžiausią naudą.

React.memo alternatyvos

Nors React.memo yra galingas įrankis, tai nėra vienintelė galimybė optimizuoti React komponentų našumą. Štai keletas alternatyvų ir papildomų metodų:

1. PureComponent

Klasių komponentams PureComponent suteikia panašią funkciją kaip React.memo. Jis atlieka paviršutinišką tiek savybių (props), tiek būsenos (state) palyginimą ir persikrauna tik tada, jei yra pokyčių.

import React from 'react';

class MyComponent extends React.PureComponent {
 render() {
 console.log('MyComponent rendered');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

PureComponent yra patogi alternatyva rankiniam shouldComponentUpdate įgyvendinimui, kuris buvo tradicinis būdas išvengti nereikalingų persikrovimų klasių komponentuose.

2. shouldComponentUpdate

shouldComponentUpdate yra gyvavimo ciklo metodas klasių komponentuose, leidžiantis apibrėžti pasirinktinę logiką, ar komponentas turėtų persikrauti. Jis suteikia didžiausią lankstumą, bet taip pat reikalauja daugiau rankinio darbo.

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;

Nors shouldComponentUpdate vis dar yra prieinamas, PureComponent ir React.memo paprastai yra pageidaujami dėl savo paprastumo ir naudojimo lengvumo.

3. useCallback

useCallback yra React „kablys“ (hook), kuris memoizuoja funkciją. Jis grąžina memoizuotą funkcijos versiją, kuri keičiasi tik tada, jei pasikeitė viena iš jos priklausomybių. Tai ypač naudinga perduodant atgalinio ryšio funkcijas (callbacks) kaip savybes memoizuotiems komponentams.

Apsvarstykite šį pavyzdį:

import React, { useState, useCallback, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 Click Me
 );
};

const MemoizedComponent = memo(MyComponent);

const App = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
 setCount(count + 1);
 }, [count]);

 return (
 

 
 
Count: {count}
 
 );
};

export default App;

Šiame pavyzdyje useCallback užtikrina, kad handleClick funkcija pasikeis tik tada, kai pasikeis count būsena. Be useCallback, nauja funkcija būtų sukuriama kiekvieną kartą atvaizduojant App, todėl MemoizedComponent persikrautų be reikalo.

4. useMemo

useMemo yra React „kablys“ (hook), kuris memoizuoja reikšmę. Jis grąžina memoizuotą reikšmę, kuri keičiasi tik tada, jei pasikeitė viena iš jos priklausomybių. Tai naudinga norint išvengti brangių skaičiavimų, kurių nereikia iš naujo atlikti kiekvieną kartą atvaizduojant.

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;

Šiame pavyzdyje useMemo užtikrina, kad expensiveCalculation funkcija būtų iškviesta tik tada, kai pasikeis input būsena. Tai apsaugo nuo skaičiavimo pakartojimo kiekvieną kartą atvaizduojant, kas gali žymiai pagerinti našumą.

Praktiniai pavyzdžiai pasaulinėms programoms

Apsvarstykime keletą praktinių pavyzdžių, kaip React.memo ir susijusios technikos gali būti taikomos pasaulinėse programose:

1. Kalbos parinkiklis

Kalbos parinkiklio komponentas dažnai atvaizduoja galimų kalbų sąrašą. Sąrašas gali būti gana statinis, tai reiškia, kad jis dažnai nesikeičia. Naudojant React.memo galima išvengti nereikalingo kalbos parinkiklio persikrovimo, kai atnaujinamos kitos programos dalys.

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;

Šiame pavyzdyje MemoizedLanguageItem persikraus tik tada, jei pasikeis language arba onSelect savybė. Tai gali būti ypač naudinga, jei kalbų sąrašas yra ilgas arba jei onSelect apdorojimo funkcija yra sudėtinga.

2. Valiutų konverteris

Valiutų konverterio komponentas gali rodyti valiutų sąrašą ir jų keitimo kursus. Keitimo kursai gali būti periodiškai atnaujinami, tačiau valiutų sąrašas gali išlikti gana stabilus. Naudojant React.memo galima išvengti nereikalingo valiutų sąrašo persikrovimo, kai atnaujinami keitimo kursai.

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;

Šiame pavyzdyje MemoizedCurrencyItem persikraus tik tada, jei pasikeis currency, rate arba onSelect savybė. Tai gali pagerinti našumą, jei valiutų sąrašas yra ilgas arba jei keitimo kursų atnaujinimai yra dažni.

3. Vartotojo profilio rodinys

Rodant vartotojo profilį, rodoma statinė informacija, tokia kaip vardas, profilio nuotrauka ir galbūt biografija. Naudojant `React.memo` užtikrinama, kad komponentas persikraus tik tada, kai vartotojo duomenys iš tikrųjų pasikeis, o ne kiekvieną kartą atnaujinant pagrindinį komponentą.

import React, { memo } from 'react';

const UserProfile = ({ user }) => {
 console.log('UserProfile rendered');
 return (
 

 
{user.name}
 
 
{user.bio}
 
 );
};

export default memo(UserProfile);

Tai ypač naudinga, jei `UserProfile` yra didesnės, dažnai atnaujinamos prietaisų skydelio ar programos dalis, kurioje patys vartotojo duomenys dažnai nesikeičia.

Dažniausios klaidos ir kaip jų išvengti

Nors React.memo yra vertingas optimizavimo įrankis, svarbu žinoti apie dažniausiai pasitaikančias klaidas ir kaip jų išvengti:

• Perdėta memoizacija: Beatodairiškas React.memo naudojimas gali pakenkti našumui, nes pats paviršutiniškas palyginimas turi savo kainą. Memoizuokite tik tuos komponentus, kuriems tai greičiausiai bus naudinga.
• Neteisingi priklausomybių masyvai: Naudodami useCallback ir useMemo, įsitikinkite, kad pateikiate teisingus priklausomybių masyvus. Priklausomybių praleidimas arba nereikalingų priklausomybių įtraukimas gali sukelti netikėtą elgseną ir našumo problemų.
• Savybių (props) mutavimas: Venkite tiesioginio savybių mutavimo, nes tai gali apeiti React.memo paviršutinišką palyginimą. Atnaujindami savybes visada kurkite naujus objektus ar masyvus.
• Sudėtinga palyginimo logika: Venkite sudėtingos palyginimo logikos pasirinktinėse palyginimo funkcijose, nes tai gali panaikinti React.memo našumo pranašumus. Palyginimo logiką išlaikykite kuo paprastesnę ir efektyvesnę.

Jūsų programos profiliavimas

Geriausias būdas nustatyti, ar React.memo iš tikrųjų pagerina našumą, yra profiliuoti savo programą. React siūlo keletą profiliavimo įrankių, įskaitant React DevTools Profiler ir React.Profiler API.

React DevTools Profiler leidžia įrašyti jūsų programos našumo pėdsakus ir nustatyti komponentus, kurie dažnai persikrauna. React.Profiler API leidžia programiškai išmatuoti konkrečių komponentų atvaizdavimo laiką.

Profiluodami savo programą galite nustatyti komponentus, kuriems memoizacija duotų didžiausią naudą, ir užtikrinti, kad React.memo iš tikrųjų pagerintų našumą.

Išvada

React.memo yra galingas įrankis, skirtas optimizuoti React komponentų našumą. Išvengdamas nereikalingų persikrovimų, jis gali pagerinti jūsų programų greitį ir jautrumą, o tai lemia geresnę vartotojo patirtį. Tačiau svarbu naudoti React.memo apgalvotai ir profiliuoti savo programą, siekiant užtikrinti, kad ji tikrai gerina našumą.

Suprasdami šiame tinklaraščio įraše aptartas koncepcijas ir technikas, galite efektyviai naudoti React.memo ir susijusias technikas, kad sukurtumėte aukšto našumo React programas pasaulinei auditorijai, užtikrindami, kad jūsų programos būtų greitos ir jautrios vartotojams visame pasaulyje.

Optimizuodami savo React programas, nepamirškite atsižvelgti į pasaulinius veiksnius, tokius kaip tinklo delsą ir įrenginių galimybes. Sutelkdami dėmesį į našumą ir prieinamumą, galite sukurti programas, kurios suteikia puikią patirtį visiems vartotojams, nepriklausomai nuo jų buvimo vietos ar įrenginio.

Papildoma literatūra ir ištekliai

• React.memo dokumentacija
• useCallback dokumentacija
• useMemo dokumentacija
• Našumo optimizavimas React aplinkoje
• Komponentų profiliavimas su React Profiler