Արդյունավետության օպտիմիզացիայի useMemo հուկը React-ում

Արդյունավետության օպտիմիզացիայի առաջին հուկը, որը մենք կդիտարկենք, useMemo-ն է:

Այս հուկը օգնում է կեշավորել ռեսուրսատար գործողությունների արդյունքները էկրանի վերագծման պահերի միջև և, համապատասխանաբար, կարող է օգնել խուսափել ավելորդ ծավալուն հաշվարկներից: Նման կեշավորումը անվանում են նաև մեմոիզացիա:

Տեսնենք, թե ինչպես է այն աշխատում: Եկեք ստեղծենք բաղադրիչ կոճակով և վերնագիր h3-ով.

App.jsxreturn (
  <div>
    <h3>Text</h3>
    <button>click</button>
  </div>
);

Իսկ հիմա անենք այնպես, որ վերնագրի վրա կտտացնելիս նրա գույնը փոխվի նարնջագույնից կանաչի և հակառակը: Սկզբից սահմանենք isGreen ստեյթը.

App.jsxconst [isGreen, setIsGreen] = useState(false);

Ավելացնենք style ատրիբուտում վերնագրի գույնի փոփոխման պայման և կցենք կտտոցի մշակիչ.

App.jsx<h3 onClick={() => setIsGreen(!isGreen)}
  style={{ color: isGreen ? 'green' : 'orangered' }}
>Text</h3>

Թող նաև ունենանք ինչ-որ արժեք, որը կմեծանա կոճակի վրա կտտացնելիս մեկով: Սահմանենք դրա համար ստեյթ.

App.jsxconst [num, setNum] = useState(0);

Ավելացնենք կոճակի վրա կտտացնելու մշակում.

App.jsx<button onClick={() => setNum(num + 1)}>
  clicks
</button>

Թող նաև ունենանք ինչ-որ ֆունկցիա square, որը կվերադարձնի num արժեքի քառակուսին: Ֆունկցիայի կանչի արդյունքը կգրենք result փոփոխականի մեջ.

App.jsxconst result = square(num);

function square(num) {
  return num * num;
}

Ցուցադրենք result-ը կոճակի տեքստում.

App.jsx<button onClick={() => setNum(num + 1)}>
  clicks: {result}
</button>

Արդյունքում ստացանք հետևյալը. կոճակի վրա կտտացնելիս փոխվում է num արժեքը, որն այնուհետև աստիճանաբար բարձրացվում է քառակուսի, իսկ վերնագրի վրա կտտացնելիս փոխվում է վերնագրի գույնը.

Մենք ունենք շատ փոքր բաղադրիչ, ամեն ինչ աշխատում է արագ, չնայած այն հանգամանքին, որ կտտացնելիս վերնագրի վրա՝ նրա գույնը փոխելու համար, ամբողջ բաղադրիչը վերագծվում է նորից, համապատասխանաբար, նորից են տեղի ունենում հաշվարկները, որոնք կապված են կոճակի հետ, և սա նույնիսկ այն դեպքում, երբ մենք դրան չենք դիպչել: Իսկ հիմա պատկերացրեք, եթե մեր հաշվարկները ծավալուն լինեին և ամեն ինչ նորից հաշվարկվեր ամեն անգամ.

Եկեք մի փոքր ծանրացնենք մեր ֆունկցիան. այժմ այն կմտածի մի փոքր ավելի երկար: Այսպիսով մենք կիմիտացնենք երկար հաշվարկներ.

App.jsxfunction square(num) {
  let startTime = performance.now();
  
  while (performance.now() - startTime < 500) {
    // Պարզապես ոչինչ չանել ...
  }
  
  return num * num;
}

Հիմա կտտացրեք վերնագրին: Ստացվում է, որ այժմ ֆունկցիայի երկար աշխատանքի պատճառով square (իսկ կոճակին-էլ մենք չենք դիպչում) մենք մի ամբողջ հավերժություն պետք է սպասենք, որպեսզի վերնագիրը փոխի իր գույնը:

Այստեղ մեզ օգնության կգա useMemo հուկը: Դրա համար մենք պետք է առաջին պարամետրով փոխանցենք ֆունկցիա, որը հաշվարկում է արժեքը, որը մենք ցանկանում ենք կեշավորել. այդ ֆունկցիան պետք է լինի մաքուր և չընդունի ոչ մի պարամետր: Իսկ երկրորդ պարամետրով՝ կախվածությունները քառակուսի փակագծերում, այլ կերպ ասած, բոլոր ռեակտիվ արժեքները, որոնք մասնակցում են ֆունկցիայի կոդում: Այսպիսով, result-ում մենք այժմ կգրենք այսպիսի կոնստրուկցիա.

App.jsxconst result = useMemo(() => square(num), [num]);

Կրկին կտտացնենք վերնագրին: Այժմ, եթե մենք չենք դիպչում հաշվարկներով կոճակին և չենք փոխում այդպիսով num ստեյթի արժեքը, ապա ոչինչ չի վերահաշվարկվում, և React-ը ցուցադրում է կեշավորված արժեքը կոճակում, ուստի մեր վերնագիրը արագությամբ փոխում է իր գույնը.