React-da Performans Optimallasdirma Hooku useMemo

Ilk performans optimallasdirma hooku, hansini ki muraciet edeceyik - bu useMemo.

Bu hook, resurs tutumlu emeliyyatlarin neticeelerini ekran yeniden renderlari arasinda kesllemeye komek edir ve ona uygun olaraq artiq volumlu hesablamalarin qarsisini almaqa komek ede biler. Bu cur keslleme memomize de adlanir.

Gelin, bunun necə islediyine baxaq. Gelin duyme ve h3 basligi olan bir komponent yaradaq:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

Indi ise edek ki, basliq uzerinde klikleyende onun rengi narinciden yasile ve ya eksine deyissin. Evvela isGreen state-ni yaradaq:

const [isGreen, setIsGreen] = useState(false);

Basligin style atributuna basligin renginin deyisme sertini elave edek ve klik hadisesini qosaq:

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

Qoy eləcə de bizim klik zamanı duymə uzerinde bir deyerimiz olsun ki, bir vahid artır. Bunun ucun state yaradaq:

const [num, setNum] = useState(0);

Duyənin klik emeliyyatini elave edek:

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

Qoy eləcə de bizim square adli funksiyamiz olsun, hansı ki num deyerinin kvadratını qaytarır. Funksiyanin cagrilma neticesini result deyisenine yazacayıq:

const result = square(num);

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

Gelin result-i duymenin metninde gosterək:

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

Netice olaraq, bizde belə bir şey alındı: duyməni klikleyende num deyeri deyisir, sonra isə kvadratı hesablanır, basliq üzerinde klikleyende isə basliğin rengi deyisir.

Bizim çox kiçik bir komponentimiz var, hər şey sürətli işleyir, baxmayaraq ki, basliq üzerinde klikleyende onun renginin deyişmesi üçün butun komponent yeniden render olunur, ona uyğun olaraq duymə ile bağlı olan hesablamalar da yeniden baş verir, bu isə ona baxmayaraq ki, biz ona toxunmamışıq. A indi təsəvvür edin, əgər bizim hesablamalarımız həcmli olsaydı və hər dəfə yenidən hesablansaydı.

Gelin, funksiyamızı bir az agırlasdıraq, indi o bir az daha çox düşünecek. Bu üsulla uzun süren hesablamaları təqlid edəcəyik:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Heç nə etmə ...
	}
	
	return num * num;
}

Indi basliq üzerinde kliklemeyi sinayın. Belə çıxır ki, indi square funksiyasının uzun işlemesine görə (biz duyməyə isə toxunmuruq!) basliğın renginin deyişmesi üçün sonsuzluğa qədər gözləməliyik!

Bura bizə useMemo hooku köməyə gəlir. Bunun üçün, bizə ilk parametr kəşllemək istədiyimiz dəyəri hesablayan funksiyanı ötürmək lazımdır, bu funksiya saf olmalıdır və heç bir parametr qəbul etmemelidir. İkinci parametr kimi isə - kvadrat mötərizələr içində asılılıqlar, başqa sözlə, funksiyanın kodunda iştirak edən bütün reaktiv dəyərlər. Beləliklə, result-ə indi belə bir quruluş yazacayıq:

const result = useMemo(() => square(num), [num]);

Yenidən başlıq üzerində klikləməyi sınayaq. İndi, əgər biz hesablamalar olan düyməyə toxunmuruqsa və beləcə state dəyəri num-i dəyişmirsək, onda heç nə yenidən hesablanmır, və React düymədə keşlənmiş dəyəri göstərir, ona görə də bizim başlıq tez bir zamanda öz rəngini dəyişir.

App komponenti yaradın, onun içinə abzas yerləşdirin. text state-ni 'react' ilkin dəyəri ilə yaradın, state dəyərinin abzasın mətnində görünmesini təmin edin. Qoy abzasın üzerində klikləyəndə, onun mətninə nida işarəsi əlavə olunsun.

num adlı başqa bir state yaradın, ilkin dəyəri 0 olsun. App-in içinə başqa bir abzas yerləşdirin. Elə edin ki, onun üzerində klikləyəndə num 1 vahid artır.

İndi isə App-ə triple funksiyasını əlavə edin, hansı ki parametr kimi num-i qəbul edir və onun üçə vurulmuş dəyərini qaytarır. Funksiyanın çağırılma nəticəsini result dəyişəninə yazın. result-i ikinci abzasın mətnində göstərin. Növbə ilə abzasların üzerində klikləyin, nida işarələrinin nə qədər yavaş əlavə olunduğunu qeyd edin.

Vəziyyəti düzəldin, yavaş işləyən funksiyanı triple-i useMemo-a sarıyın.