Kā iegaumēt funkcijas un vērtības JavaScript un reaģēt

Memoizācija ir optimizācijas paņēmiens, kas līdzīgs kešatmiņai. Tas darbojas, saglabājot iepriekšējos funkcijas izsaukšanas rezultātus un izmantojot šos rezultātus nākamajā funkcijas izpildes reizē. Tas ir īpaši noderīgi lietojumprogrammās, kurās ir daudz aprēķinu, kas atkārto funkciju izsaukumus ar tiem pašiem parametriem.

Atgādināšanu var izmantot vienkāršā JavaScript un arī React dažos dažādos veidos.

Memoizācija JavaScript

Lai iegaumētu funkciju JavaScript, šīs funkcijas rezultāti jāsaglabā kešatmiņā. Kešatmiņa var būt objekts ar argumentiem kā atslēgas un rezultātiem kā vērtībām.

Izsaucot šo funkciju, tā pirms palaišanas vispirms pārbauda, ​​vai rezultāts ir kešatmiņā. Ja tā ir, tas atgriež kešatmiņā saglabātos rezultātus. Pretējā gadījumā tas tiek izpildīts.

Apsveriet šo funkciju:

funkcijukvadrāts(num) {
atgriezties num * num
}

Funkcija pieņem argumentu un atgriež tā kvadrātu.

Lai palaistu funkciju, izsauciet to ar šādu numuru:

kvadrāts(5) // 25

Ar 5 kā argumentu square() darbosies diezgan ātri. Tomēr, ja jūs aprēķinātu kvadrātu 70 000, būtu ievērojama kavēšanās. Ne daudz, bet kavēšanās tomēr. Tagad, ja jūs izsauktu funkciju vairākas reizes un nokārtotu 70 000, katrā izsaukumā jūs pieredzētu aizkavi.

Šo aizkavi var novērst, izmantojot memoizāciju.

konst memoizedSquare = () => {
 ļaut kešatmiņa = {};
atgriezties (skaits) => {
 ja (num in kešatmiņa) {
 console.log('Kešatmiņas vērtības atkārtota izmantošana');
 atgriezties kešatmiņa[num];
 } cits {
 console.log('Aprēķinot rezultātu');
ļaut rezultāts = num * num;
// kešatmiņa uz jaunsrezultātsvērtībupriekšNākamaislaiks
kešatmiņa[num] = rezultāts;
atgriezties rezultāts;
 }
 }
 }

Šajā piemērā funkcija pārbauda, ​​vai rezultāts ir aprēķināts iepriekš, pārbaudot, vai tas pastāv kešatmiņas objektā. Ja tā ir, tā atgriež jau aprēķināto vērtību.

Kad funkcija saņem jaunu skaitli, tā aprēķina jaunu vērtību un pirms atgriešanas saglabā rezultātus kešatmiņā.

Arī šis piemērs ir diezgan vienkāršs, taču tas izskaidro, kā iegaumēšana darbotos, lai uzlabotu programmas veiktspēju.

Jāatceras tikai tīras funkcijas. Šīs funkcijas atgriež to pašu rezultātu, ievadot tos pašus argumentus. Ja izmantosit netīro funkciju iegaumēšanu, jūs nevis uzlabosit veiktspēju, bet gan palielināsit pieskaitāmās izmaksas. Tas ir tāpēc, ka katru reizi, kad iegaumējat funkciju, jūs izvēlaties ātrumu, nevis atmiņu.

Memoizācija programmā React

Ja vēlaties optimizēt React komponentus, React nodrošina iegaumēšanu, izmantojot āķi useMemo(), React.memo un useCallBack().

Izmantot useMemo()

useMemo() ir a Reakcijas āķis kas pieņem funkciju un atkarības masīvu.

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

Tas iegaumē no šīs funkcijas atgriezto vērtību. Vērtības atkarības masīvā nosaka, kad funkcija tiek izpildīta. Tikai tad, kad tie mainās, funkcija tiek izpildīta vēlreiz.

Piemēram, tālāk norādītajam lietotnes komponentam ir atmiņā saglabāta vērtība, ko sauc par rezultātu.

imports { useMemo } no "reaģēt"
funkcijuApp(vērtību) {
konst kvadrāts = (vērtība) => {
atgriezties vērtība * vērtība
 }
konst rezultāts = useMemo(
 () => kvadrāts (vērtība), 
[vērtība]
 );
atgriezties (
<div>{rezultāts (5)}</div>
 )
}

Lietotnes komponents izsauc square() katrā renderējumā. Veiktspēja pasliktināsies, ja lietotnes komponents tiks renderēts vairākas reizes Reaģēt rekvizīti mainīšana vai stāvokļa atjaunināšana, it īpaši, ja kvadrātveida () funkcija ir dārga.

Tomēr, tā kā useMemo() kešatmiņā saglabā atgrieztās vērtības, kvadrātveida funkcija netiek izpildīta katrā atkārtotajā renderēšanā, ja vien nemainās atkarības masīva argumenti.

Izmantojot React.memo()

React.memo() ir augstākas kārtas komponents, kas pieņem React komponentu un funkciju kā argumentus. Funkcija nosaka, kad komponents ir jāatjaunina.

Funkcija nav obligāta, un, ja tā nav nodrošināta, React.memo veic seklu komponenta pašreizējo rekvizītu salīdzinājumu ar iepriekšējiem rekvizītiem. Ja rekvizīti atšķiras, tas aktivizē atjauninājumu. Ja rekvizīti ir vienādi, tas izlaiž atkārtotu renderēšanu un atkārtoti izmanto atmiņā saglabātās vērtības.

Izvēles funkcija kā argumentus pieņem iepriekšējos un nākamos rekvizītus. Pēc tam varat tieši salīdzināt šos rekvizītus, lai izlemtu, vai atjaunināt komponentu vai nē.

Reaģēt.memo(Komponents, [areEqual (prevProps, nextProps)])

Vispirms apskatīsim piemēru bez izvēles funkcijas argumenta. Zemāk ir komponents ar nosaukumu Komentāri, kas pieņem vārdu un e-pasta rekvizītus.

funkcijukomentāri ({vārds, komentārs, patīk}) {
atgriezties (
<div>
<lpp>{name}</lpp>
<lpp>{komentārs}</lpp>
<lpp>{patīk}</lpp>
</div>
 )
}

Atgādināto komentāru komponentam React.memo būs ietīts šādi:

konst MemoizedComment = React.memo (komentārs)

Varat piezvanīt un izsaukt to tāpat kā jebkuru citu React komponentu.

<IegaumētsKomentāra nosaukums="Marija" komentārs ="Memoizācija ir lieliska" patīk=1/>

Ja vēlaties pats veikt rekvizītu salīdzināšanu, nododiet tālāk norādīto funkciju React.memo kā otro argumentu.

imports Reaģēt no "reaģēt"
funkcijupārbaudietCommentProps(prevProps, nextProps) {
atgriezties prevProps.name nextProps.name
&& prevProps.comment nextProps.comment
&& prevProps.likes nextProps.likes
}
konst MemoizedComment = React.memo (Komentāri, checkCommentProps)

Ja checkProfileProps atgriež true, komponents netiek atjaunināts. Pretējā gadījumā tas tiek atveidots atkārtoti.

Pielāgotā funkcija ir noderīga, ja vēlaties pielāgot atkārtotu renderēšanu. Piemēram, varat to izmantot, lai atjauninātu komponentu Komentāri tikai tad, kad mainās atzīmju Patīk skaits.

Atšķirībā no useMemo() āķa, kas iegaumē tikai funkcijas atgriezto vērtību, React.memo iegaumē visu funkciju.

Izmantojiet React.memo tikai tīrām sastāvdaļām. Turklāt, lai samazinātu salīdzināšanas izmaksas, iegaumējiet tikai tos komponentus, kuru rekvizīti bieži mainās.

UseCallBack() izmantošana

Varat izmantot āķi useCallBack(), lai saglabātu atmiņā funkciju komponenti.

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

Funkcija tiek atjaunināta tikai tad, kad mainās atkarības masīva vērtības. Āķis darbojas tāpat kā useMemo() atzvans, taču tas iegaumē funkcijas komponentu starp renderēšanu, nevis saglabā atmiņā vērtības.

Apsveriet tālāk sniegto atmiņā saglabātas funkcijas piemēru, kas izsauc API.

imports { useCallback, useEffect } no "reaģēt";
konst Komponents = () => {
konst getData = useCallback(() => {
 console.log('izsauciet API');
 }, []);
 useEffect(() => {
 getData ();
 }, [getData]);
 };

Funkcija getData(), kas tiek izsaukta in useEffect, tiks izsaukta atkārtoti tikai tad, kad mainās getData vērtība.

Vai jums vajadzētu atcerēties?

Šajā apmācībā jūs uzzinājāt, kas ir iegaumēšana, tās priekšrocības un kā to ieviest JavaScript un React. Tomēr jums jāzina, ka React jau ir ātrs. Vairumā gadījumu komponentu vai vērtību iegaumēšana palielina salīdzināšanas izmaksas un neuzlabo veiktspēju. Tāpēc iegaumējiet tikai dārgas sastāvdaļas.

React 18 ieviesa arī jaunus āķus, piemēram, useId, useTransition un useInsertionEffect. Varat tos izmantot, lai uzlabotu React lietojumprogrammu veiktspēju un lietotāja pieredzi.