Memoisointi on välimuistin kaltainen optimointitekniikka. Se toimii tallentamalla funktiokutsun aikaisemmat tulokset ja käyttämällä niitä seuraavan kerran, kun funktio suoritetaan. Se on erityisen hyödyllinen laskentaa vaativissa sovelluksissa, jotka toistavat funktiokutsuja samoilla parametreilla.

Voit käyttää memoisointia tavallisessa JavaScriptissä ja myös Reactissa muutamalla eri tavalla.

Memoisointi JavaScriptissä

Jos haluat tallentaa funktion muistiin JavaScriptissä, sinun on tallennettava kyseisen funktion tulokset välimuistiin. Välimuisti voi olla objekti, jonka argumentit ovat avaimia ja tulokset arvoina.

Kun kutsut tätä toimintoa, se tarkistaa ennen suorittamista, onko tulos välimuistissa. Jos on, se palauttaa välimuistissa olevat tulokset. Muuten se suorittaa.

Harkitse tätä toimintoa:

toimintoneliö-(nro) {
palata num * num
}

Funktio ottaa argumentin ja palauttaa sen neliön.

Suorita toiminto soittamalla sille numerolla seuraavasti:

neliö(5) // 25

Kun argumentti on 5, square() toimii melko nopeasti. Kuitenkin, jos lasket neliön 70 000, viive olisi huomattava. Ei paljoa, mutta viiveellä kuitenkin. Jos nyt kutsuisit funktiota useita kertoja ja ohittaisit 70 000, kokisit viiveen jokaisessa kutsussa.

instagram viewer

Voit poistaa tämän viiveen käyttämällä muistiinpanoa.

konst memoizedSquare = () => {
 päästää kätkö = {};
palata (luku) => {
 jos (nm in kätkö) {
 console.log('Välimuistin arvon uudelleenkäyttö');
 palata kätkö[nro];
 } muu {
 console.log('Tulosta lasketaan');
päästää tulos = numero * num;
// kätkö the UusitulosarvovartenSeuraavaaika
kätkö[nro] = tulos;
palata tulos;
 }
 }
 }

Tässä esimerkissä funktio tarkistaa, onko tulos laskettu aiemmin, tarkistamalla, onko se välimuistiobjektissa. Jos se on, se palauttaa jo lasketun arvon.

Kun funktio vastaanottaa uuden luvun, se laskee uuden arvon ja tallentaa tulokset välimuistiin ennen palautusta.

Tämäkin esimerkki on melko yksinkertainen, mutta se selittää, kuinka muistiinpano voisi parantaa ohjelman suorituskykyä.

Sinun tulisi muistaa vain puhtaat toiminnot. Nämä funktiot palauttavat saman tuloksen, kun välität samat argumentit. Jos käytät muistiinpanoa epäpuhtaisiin toimintoihin, et paranna suorituskykyä, mutta lisäät yleiskustannuksia. Tämä johtuu siitä, että valitset nopeuden muistin sijaan aina, kun tallennat toiminnon muistiin.

Muistiinpano Reactissa

Jos haluat optimoida React-komponentteja, React tarjoaa muistiinpanon useMemo()-koukun, React.memo- ja useCallBack()-koukun avulla.

UseMemo()

useMemo() on a Reaktiokoukku joka hyväksyy funktion ja riippuvuustaulukon.

konst memoizedValue = useMemo(() => computeExpensiveValue (a, b), [a, b]);

Se muistaa funktiosta palautetun arvon. Riippuvuustaulukon arvot määräävät, milloin toiminto suoritetaan. Vasta kun ne muuttuvat, toiminto suoritetaan uudelleen.

Esimerkiksi seuraavalla sovelluskomponentilla on muistiin tallennettu arvo, jota kutsutaan tulokseksi.

tuonti { käytäMemoa } alkaen "reagoi"
toimintoSovellus(arvo) {
konst neliö = (arvo) => {
palata arvo * arvo
 }
konst tulos = useMemo(
 () => neliö (arvo), 
[arvo]
 );
palata (
<div>{tulos (5)}</div>
 )
}

Sovelluskomponentti kutsuu square():tä jokaisessa renderöinnissa. Suorituskyky heikkenee, jos sovelluskomponentti renderöidään monta kertaa johtuen Reagoi rekvisiitta muuttaminen tai tilan päivitys, varsinkin jos square()-funktio on kallis.

Koska useMemo() tallentaa palautetut arvot välimuistiin, neliöfunktiota ei suoriteta jokaisessa uudelleenmuodostuksessa, elleivät riippuvuustaulukon argumentit muutu.

React.memo()

React.memo() on korkeamman asteen komponentti, joka hyväksyy React-komponentin ja funktion argumentteina. Toiminto määrittää, milloin komponentti tulee päivittää.

Toiminto on valinnainen, ja jos sitä ei ole saatavilla, React.memo tekee matalan kopion vertailun komponentin nykyisistä rekvisiittauksista sen aikaisempiin varusteisiin. Jos varusteet ovat erilaisia, se käynnistää päivityksen. Jos rekvisiitta on sama, se ohittaa uudelleenrenderöinnin ja käyttää muistiin tallennetut arvot uudelleen.

Valinnainen funktio hyväksyy edelliset ja seuraavat rekvisiittat argumentteina. Voit sitten verrata näitä varusteita ja päättää, päivitetäänkö komponentti vai ei.

Reagoi.muistio(Komponentti, [areEqual (prevProps, nextProps)])

Katsotaanpa ensin esimerkkiä ilman valinnaista funktioargumenttia. Alla on Kommentit-niminen komponentti, joka hyväksyy nimen ja sähköpostin rekvisiitta.

toimintoKommentit ({nimi, kommentti, tykkää}) {
palata (
<div>
<s>{nimi}</s>
<s>{kommentti}</s>
<s>{tykkää}</s>
</div>
 )
}

Muistiin tallennetun kommenttiosan ympärille on kääritty React.memo seuraavasti:

konst MemoizedComment = React.memo (kommentti)

Voit soittaa ja kutsua sitä kuten mitä tahansa muuta React-komponenttia.

<Muistettu Kommentin nimi="Mary" kommentti ="Memoisointi on hienoa" tykkää=1/>

Jos haluat suorittaa rekvisiittavertailun itse, välitä seuraava funktio React.memolle toiseksi argumentiksi.

tuonti Reagoi alkaen "reagoi"
toimintotarkistaCommentProps(prevProps, nextProps) {
palata prevProps.name nextProps.name
&& prevProps.comment nextProps.comment
&& prevProps.likes nextProps.likes
}
konst MemoizedComment = React.memo (kommentit, checkCommentProps)

Jos checkProfileProps palauttaa true, komponenttia ei päivitetä. Muussa tapauksessa se renderöidään uudelleen.

Mukautettu toiminto on hyödyllinen, kun haluat mukauttaa uudelleenrenderöinnin. Voit esimerkiksi käyttää sitä Kommentit-komponentin päivittämiseen vain, kun tykkäysten määrä muuttuu.

Toisin kuin useMemo()-koukku, joka tallentaa vain funktion palautetun arvon, React.memo tallentaa koko funktion muistiin.

Käytä React.memoa vain puhtaille komponenteille. Myös vertailukustannusten vähentämiseksi muistiin vain komponentit, joiden rekvisiitta muuttuu usein.

UseCallBack()

Voit käyttää useCallBack()-koukkua muistiin tallentamiseen toimintokomponentit.

konst memoizedCallback = useCallback(
 () => {
 doSomething (a, b);
 },
[a, b],
);

Funktio päivittyy vain, kun riippuvuustaulukon arvot muuttuvat. Koukku toimii kuten useMemo()-takaisinkutsu, mutta se tallentaa funktiokomponentin muistiin renderöintien välillä arvojen muistiin tallentamisen sijaan.

Harkitse seuraavaa esimerkkiä muistiin tallennetusta funktiosta, joka kutsuu API: ta.

tuonti { useCallback, useEffect } alkaen "reagoi";
konst Komponentti = () => {
konst getData = useCallback(() => {
 console.log('soita API: lle');
 }, []);
 useEffect(() => {
 getData();
 }, [getData]);
 };

UseEffectissä kutsuttu getData()-funktio kutsutaan uudelleen vain, kun getData-arvo muuttuu.

Pitäisikö sinun muistella?

Tässä opetusohjelmassa opit, mitä memoisointi on, sen edut ja kuinka se otetaan käyttöön JavaScriptissä ja Reactissa. Sinun pitäisi kuitenkin tietää, että React on jo nopea. Useimmissa tapauksissa komponenttien tai arvojen muistaminen lisää vertailukustannuksia eikä paranna suorituskykyä. Tämän vuoksi muistiin vain kalliit komponentit.

React 18 esitteli myös uusia koukkuja, kuten useId, useTransition ja useInsertionEffect. Voit käyttää näitä parantamaan React-sovellusten suorituskykyä ja käyttökokemusta.