React හි useMemo කාර්යක්ෂමතා ප්‍රශස්තිකරණ කොකුව

කාර්යක්ෂමතාව ප්‍රශස්ත කිරීම සඳහා අපි සලකා බලන පළමු කොකුව - එය useMemo වේ.

මෙම කොකුව තිරය නැවත ඇඳීම් අතරතුර සම්පත්-දැඩි මෙහෙයුම්වල ප්‍රතිඵල කෑෂ් කිරීමට උපකාරී වන අතර ඒ අනුව අනවශ්‍ය විශාල ගණනය කිරීම් වළක්වා ගැනීමට උපකාරී වේ. මෙවැනි කෑෂ් කිරීම මෙමොයිසේෂන් ලෙසද හැඳින්වේ.

එය ක්‍රියා කරන ආකාරය බලමු. අපි බොත්තමක් සහ h3 ශීර්ෂයක් සහිත සංරචකයක් සාදමු:

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

දැන් අපි ශීර්ෂය මත ක්ලික් කිරීමෙන් එහි වර්ණය තැඹිලි පැහැයෙන් කොළ පැහැයට හරවන ආකාරය කරමු. පළමුව අපි isGreen රාජ්‍යයක් නිර්මාණය කරමු:

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

ශීර්ෂයේ style ගුණාංගයට ශීර්ෂයේ වර්ණය වෙනස් කිරීම සඳහා කොන්දේසියක් එකතු කර ක්ලික් හසුකරණයක් යොදමු:

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

අප සතුව තවත් යම් අගයක් තිබිය යුතුය, එය ක්ලික් කිරීමේදී අපගේ බොත්තම මත එකකින් වැඩි වේ. ඒ සඳහා රාජ්‍යයක් නිර්මාණය කරමු:

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

බොත්තම මත ක්ලික් කිරීම සැකසීම එකතු කරමු:

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

අප සතුව square නම් ශ්‍රිතයක් ද තිබිය යුතුය, එය num අගයේ වර්ගය ආපසු ලබා දෙයි. ශ්‍රිතය කැඳවීමේ ප්‍රතිඵලය අපි result විචල්‍යයට ලියන්නෙමු:

const result = square(num);

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

බොත්තමේ පෙළෙහි result පෙන්වමු:

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

ප්‍රතිඵලයක් වශයෙන්, අපට පහත දේ ලැබුණි: බොත්තම මත ක්ලික් කිරීමෙන් අගය වෙනස් වේ num, එය පසුව වර්ග කරනු ලැබේ, සහ ශීර්ෂය මත ක්ලික් කිරීමෙන් ශීර්ෂයේ වර්ණය වෙනස් වේ.

අපගේ සංරචකය ඉතා කුඩාය, සියල්ල ක්‍රියා කරයි වේගවත්, එසේ වුවද ශීර්ෂයේ වර්ණය වෙනස් කිරීම සඳහා ශීර්ෂය මත ක්ලික් කරන විට සම්පූර්ණ සංරචකය නැවත අඳිනු ලැබේ, ඒ අනුව ගණනය කිරීම් නැවත සිදු වේ, බොත්තමට බැඳී ඇත, එය පවා අපි එය ස්පර්ශ නොකළේ නම්. ඒ දැන් හිතන්න, අපේ ගණනය කිරීම් විශාල නම් සහ සියල්ල නැවත ගණනය කරනු ලැබුවේ නම් සෑම අවස්ථාවකම.

අපි අපගේ ශ්‍රිතය තරමක් බර කරමු, දැන් එය ටිකක් දිගු කල් සිතනු ඇත. මේ ආකාරයට දිගු ගණනය කිරීම් අපි අනුකරණය කරමු:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// කිසිවක් නොකරන්න ...
	}
	
	return num * num;
}

දැන් ශීර්ෂය මත ක්ලික් කරන්න. ප්‍රතිඵලය වන්නේ, දැන් දිගු කාලයක් වැඩ කරන ශ්‍රිතය නිසා square (අපි බොත්තම ස්පර්ශ නොකරන නමුත්) අපි සම්පූර්ණ සදාකාලිකයක් බලා සිටිය යුතුය, ශීර්ෂයේ වර්ණය වෙනස් වන තෙක්!

මෙහිදී අපට උපකාර වන්නේ කොකුව useMemo වේ. මේ සඳහා, අපි පළමු පරාමිතිය ලෙස ශ්‍රිතයක් සම්ප්‍රේෂණය කළ යුතුය, අපි කෑෂ් කිරීමට අවශ්‍ය අගය ගණනය කරන, මෙම ශ්‍රිතය පිරිසිදු විය යුතු අතර පරාමිතීන් ලබා නොගන්නා. දෙවන පරාමිතිය ලෙස - චතුරස්‍රාකාර වරහන් වල යැපෙනකම්, වෙනත් වචන වලින්, ශ්‍රිතයේ කේතයට ඇතුළත් වන සියලුම ප්‍රතික්‍රියාශීලී අගයන්. මේ අනුව, result වෙත අපි දැන් මේ වගේ ඉදිකිරීමක් ලියන්නෙමු:

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

නැවත වරක් ශීර්ෂය මත ක්ලික් කරන්න. දැන්, අපි ගණනය කිරීම් සහිත බොත්තම ස්පර්ශ නොකරන්නේ නම් සහ රාජ්‍ය අගය වෙනස් නොකරන්නේ නම් num, එවිට කිසිවක් නැවත ගණනය නොවේ, සහ React බොත්තමෙහි කෑෂ් කරන ලද අගය පෙන්වයි, එබැවින් අපගේ ශීර්ෂය වේගයෙන් වර්ණය වෙනස් කරයි.

App සංරචකයක් සාදන්න, එහි ඡේදයක් තබන්න. text රාජ්‍යයක් නිර්මාණය කරන්න ආරම්භක අගය 'react', රාජ්‍ය අගය පෙන්වීමට ඉඩ දෙන්න ඡේදයේ පෙළ ලෙස. ඡේදය මත ක්ලික් කිරීමෙන්, එහි පෙළයේ අවසානයට එකතු වන්නේ හර්ෂකාරක ලකුණ.

තවත් රාජ්‍යයක් නිර්මාණය කරන්න num, ආරම්භක අගය 0. එහි තවත් ඡේදයක් තබන්න. App. එය සිදු කරන්න, එය මත ක්ලික් කරන විට num 1 කින් වැඩි වේ.

දැන් App හි ශ්‍රිතය එකතු කරන්න triple, එය පරාමිතියක් ලෙස ගනී num සහ එහි තුන් ගුණයක් ආපසු ලබා දෙයි. ශ්‍රිතය කැඳවීමේ ප්‍රතිඵලය result විචල්‍යයට තබන්න. පෙන්වන්න result දෙවන ඡේදයේ පෙළ ලෙස. ඡේද මත පිළිවෙලින් ක්ලික් කරන්න, හර්ෂකාරක ලකුණු එකතු වන්නේ කෙසේදැයි සලකුණු කරන්න මන්දගාමීව.

මන්දගාමී තත්වය නිවැරදි කරන්න, මන්දගාමී ශ්‍රිතය triple useMemo වෙත ඔප්පු කිරීමෙන්.