Atmintinė yra optimizavimo technika, panaši į talpyklą. Jis veikia išsaugodamas ankstesnius funkcijos iškvietimo rezultatus ir naudodamas tuos rezultatus kitą kartą paleidus funkciją. Tai ypač naudinga daug skaičiavimo reikalaujančiose programose, kurios pakartoja funkcijų iškvietimus pagal tuos pačius parametrus.
Galite naudoti atmintinę naudodami paprastą „JavaScript“ ir „React“ keliais skirtingais būdais.
Atmintis „JavaScript“.
Norėdami įsiminti funkciją „JavaScript“, tos funkcijos rezultatus turite išsaugoti talpykloje. Talpykla gali būti objektas su argumentais kaip raktais ir rezultatais kaip reikšmėmis.
Kai iškviečiate šią funkciją, prieš paleisdama ji pirmiausia patikrina, ar rezultatas yra talpykloje. Jei taip, jis grąžina talpykloje saugomus rezultatus. Priešingu atveju jis vykdomas.
Apsvarstykite šią funkciją:
funkcijakvadratas(nr) {
grąžinti skaičius * skaičius
}
Funkcija priima argumentą ir grąžina jo kvadratą.
Norėdami paleisti funkciją, paskambinkite jai tokiu numeriu:
kvadratas (5) // 25
Kai argumentas yra 5, kvadratas () veiks gana greitai. Tačiau jei skaičiuotumėte 70 000 kvadratą, būtų pastebimas vėlavimas. Ne daug, bet vėlavimas. Dabar, jei iškviestumėte funkciją kelis kartus ir praleistumėte 70 000, kiekvienas skambutis vėluotų.
Galite pašalinti šį delsą naudodami atmintinę.
konst memoizedSquare = () => {
leisti talpykla = {};
grąžinti (skaičius) => {
if (nm in talpykla) {
console.log('Pakartotinis talpyklos vertės naudojimas');
grąžinti talpykla[nr];
} Kitas {
console.log('Skaičiuojant rezultatą');
leisti rezultatas = skaičius * skaičius;
// talpykla į naujasrezultatasvertėdėlKitaslaikas
talpykla[nr] = rezultatas;
grąžinti rezultatas;
}
}
}
Šiame pavyzdyje funkcija patikrina, ar rezultatas buvo apskaičiuotas anksčiau, patikrindama, ar jis yra talpyklos objekte. Jei jis turi, jis grąžina jau apskaičiuotą vertę.
Kai funkcija gauna naują skaičių, ji apskaičiuoja naują reikšmę ir išsaugo rezultatus talpykloje prieš grąžindama.
Vėlgi, šis pavyzdys yra gana paprastas, tačiau jame paaiškinama, kaip atmintis galėtų pagerinti programos veikimą.
Turėtumėte įsiminti tik grynas funkcijas. Šios funkcijos pateikia tą patį rezultatą, kai pateikiate tuos pačius argumentus. Jei nešvarioms funkcijoms naudosite atmintį, nepagerinsite našumo, bet padidinsite pridėtines išlaidas. Taip yra todėl, kad kiekvieną kartą, kai įsimenate funkciją, pasirenkate greitį, o ne atmintį.
Atmintinė programoje „React“.
Jei norite optimizuoti „React“ komponentus, „React“ suteikia atmintinę naudodami „useMemo() kabliuką, React.memo ir useCallBack().
Naudojant useMemo()
useMemo() yra a Reagavimo kabliukas kuri priima funkciją ir priklausomybės masyvą.
konst memoizedValue = useMemo(() => computeExpensiveValue (a, b), [a, b]);
Ji įsimena iš tos funkcijos grąžintą reikšmę. Priklausomybės masyvo reikšmės padiktuoja, kada funkcija vykdoma. Tik jiems pasikeitus, funkcija vėl vykdoma.
Pavyzdžiui, toliau nurodytas programos komponentas turi atmintyje įrašytą reikšmę, vadinamą rezultatu.
importuoti { useMemo } iš "reaguoti"
funkcijaProgramėlė(vertė) {
konst kvadratas = (reikšmė) => {
grąžinti reikšmė * reikšmė
}
konst rezultatas = useMemo(
() => kvadratas (vertė),
[ vertė ]
);
grąžinti (
<div>{rezultatas (5)}</div>
)
}
Programos komponentas iškviečia kvadratą () kiekviename atvaizdavime. Veikimas pablogės, jei programos komponentas bus pateiktas daug kartų dėl Reaguoti rekvizitai keitimas arba būsenos atnaujinimas, ypač jei kvadrato() funkcija yra brangi.
Tačiau kadangi useMemo() talpykloje saugo grąžintas reikšmes, kvadratinė funkcija nevykdoma kiekvienu pakartotiniu pateikimu, nebent pasikeistų priklausomybės masyvo argumentai.
Naudojant React.memo()
React.memo() yra aukštesnės eilės komponentas, kuris priima React komponentą ir funkciją kaip argumentus. Funkcija nustato, kada komponentas turi būti atnaujintas.
Funkcija yra neprivaloma, o jei jos nepateikiama, React.memo atlieka negilų dabartinių komponento rekvizitų ir ankstesnių rekvizitų palyginimą. Jei rekvizitai skiriasi, tai suaktyvina atnaujinimą. Jei rekvizitai yra vienodi, jis praleidžia pakartotinį pateikimą ir pakartotinai panaudoja atmintyje įrašytas reikšmes.
Pasirenkama funkcija priima ankstesnius ir kitus rekvizitus kaip argumentus. Tada galite aiškiai palyginti šiuos rekvizitus, kad nuspręstumėte, ar atnaujinti komponentą, ar ne.
Reaguoti.atmintinė(Komponentas, [areEqual (prevProps, nextProps)])
Pirmiausia pažiūrėkime į pavyzdį be pasirenkamo funkcijos argumento. Žemiau yra komponentas pavadinimu Komentarai, kuris priima pavadinimą ir el. pašto rekvizitus.
funkcijaKomentarai ({vardas, komentaras, patinka}) {
grąžinti (
<div>
<p>{vardas}</p>
<p>{komentaras}</p>
<p>{patinka}</p>
</div>
)
}
Atmintyje įrašytų komentarų komponentas React.memo bus apvyniotas taip:
konst MemoizedComment = React.memo (komentaras)
Galite skambinti ir vadinti jį kaip bet kurį kitą „React“ komponentą.
<PrisimintaKomentaro pavadinimas="Marija" komentaras ="Atmintis yra puiku" likes=1/>
Jei norite patys atlikti rekvizitų palyginimą, kaip antrą argumentą perduokite šią funkciją React.memo.
importuoti Reaguoti iš "reaguoti"
funkcijacheckCommentProps(prevProps, nextProps) {
grąžinti prevProps.name nextProps.name
&& prevProps.comment nextProps.comment
&& prevProps.likes nextProps.likes
}
konst MemoizedComment = React.memo (Komentarai, checkCommentProps)
Jei checkProfileProps grąžina true, komponentas neatnaujinamas. Priešingu atveju jis pateikiamas iš naujo.
Pasirinktinė funkcija naudinga, kai norite tinkinti pakartotinį atvaizdavimą. Pavyzdžiui, galite jį naudoti norėdami atnaujinti komentarų komponentą tik pasikeitus mygtukų „Patinka“ skaičiui.
Skirtingai nuo useMemo() kabliuko, kuris įsimena tik grąžintą funkcijos reikšmę, React.memo įrašo visą funkciją.
Naudokite React.memo tik gryniems komponentams. Be to, norėdami sumažinti palyginimo išlaidas, įsiminkite tik tuos komponentus, kurių rekvizitai dažnai keičiasi.
Naudojant useCallBack()
Norėdami įrašyti atmintį, galite naudoti kabliuką useCallBack(). funkcijų komponentai.
konst memoizedCallback = useCallback(
() => {
doSomething (a, b);
},
[a, b],
);
Funkcija atnaujinama tik pasikeitus priklausomybės masyvo reikšmėms. Kabliukas veikia kaip „useMemo() atgalinis skambutis, tačiau jis įsimena funkcijos komponentą tarp atvaizdų, o ne reikšmes.
Apsvarstykite toliau pateiktą atmintyje įrašytos funkcijos, kuri iškviečia API, pavyzdį.
importuoti { useCallback, useEffect } iš „reaguoti“;
konst Komponentas = () => {
konst getData = useCallback(() => {
console.log('skambinkite API');
}, []);
useEffect(() => {
getData ();
}, [getData]);
};Funkcija getData(), vadinama useEffect, bus iškviesta dar kartą tik pasikeitus getData vertei.
Ar turėtumėte prisiminti?
Šiame vadove sužinojote, kas yra atmintinė, jos privalumai ir kaip ją įdiegti „JavaScript“ ir „React“. Tačiau turėtumėte žinoti, kad „React“ jau yra greitas. Daugeliu atvejų komponentų ar verčių įsiminimas padidina palyginimo išlaidas ir nepagerina našumo. Dėl šios priežasties įsimink tik brangius komponentus.
„React 18“ taip pat pristatė naujus kabliukus, tokius kaip „useId“, „useTransition“ ir „useInsertionEffect“. Juos galite naudoti norėdami pagerinti „React“ programų našumą ir vartotojo patirtį.
