React හි useCallback ප්‍රතිදානය ප්‍රශස්ත කිරීමේ කොකුව

මෙම පාඩමේදී, අපි පහත දැක්වෙන ප්‍රතිදානය ප්‍රශස්ත කිරීමේ කොකුව සලකා බලමු useCallback.

useCallback කොකුව useMemo API වලට සමානයි, වෙනස නම් පළමු එක තිරය නැවත ඇඳීම් අතරතුර අගය කෑෂ් කරන අතර දෙවැන්න - callback. මෙය අපට වටිනාකම් අධික ශ්‍රිත නැවත ආරම්භ කිරීමට අවශ්‍ය නොවන විට එය වළක්වා ගත හැකි අතර ශ්‍රිතයක් යැවීමේදී දළ සංරචකවලට භාවිතා කළ හැකිය.

උදාහරණයක් මගින් අපි එය විස්තරාත්මකව බලමු. පළමුව, අපි App සංරචකයක් සාදා එහි num තත්වයක් ඇති කරමු:

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

අප සතුව බොත්තමක් තිබිය යුතුය, ක්ලික් කිරීමෙන් num වැඩි කරන්න 1 කින්, සහ ඡේදයක්, එහි අපි num හි අගය පෙන්වන්නෙමු:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>click</button>
		<p>clicks: {num}</p>
	</div>
);

දැන්, අපි උපකල්පනය කරමු අපේ App හි තවත් අථක ලැයිස්තුවක් පෙන්වනු ලැබේ, එය අපි තවත් බොත්තමක් ක්ලික් කිරීමෙන් එකතු කරන්නෙමු. මෙම ලැයිස්තුවේ අථක ගබඩා කිරීම සඳහා අපි items තත්වයක් ඇති කරමු:

const [items, setItems] = useState([]);

ඉන්පසු අපි addItem ශ්‍රිතය ලියන්නෙමු ඒවා එකතු කිරීම සඳහා:

function addItem() {
	setItems([...items, 'new item']);
}

දැන් අපි පෙන්වීම සඳහා කේතය ලියමු ලැයිස්තු අථක සහ එය දරු සංරචකයකට Items ලෙස යවමු, එය ප්‍රොප් වලින් අථක අරාව සහ ඒවා එකතු කිරීමේ ශ්‍රිතය ලබා ගනී. අපි කොන්සෝලයේ ප්‍රතිදානය එකතු කිරීමට අමතක නොකරමු, කවදාද යන්න දැක ගැනීමට අපගේ Items නැවත ඇදීමට යනවා:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items render');
	
	return (
		<div>
			<h3>Our items</h3>
			{result}
			<button onClick={addItem}>add item</button>
		</div>
	);
}

export default Items;

අපි Items සංරචකයේ අවසානයේ තබමු App සහ එයට අරාව items සහ එකතු කිරීමේ ශ්‍රිතය අථක addItem යවන්න:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>click</button>
			<p>clicks: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

දැන් අපි බොත්තම් මත ක්ලික් කරමු සහ num වැඩි වන බවට විශ්වාස කර ගන්න නව අථක ලැයිස්තුවට එකතු වේ. කොන්සෝලය විවෘත කිරීමෙන්, අපට දැක ගත හැකිය අපගේ ලැයිස්තුව සෑම අවස්ථාවකම නැවත ඇදේ වර, අපි බොත්තම මත ක්ලික් කළත්, එය num වැඩි කරයි.

අප සතුව කුඩා ලැයිස්තුවක් තිබේ නම්, සියල්ල හොඳයි, නමුත් එය යැයි උපකල්පනය කරන්නේ නම් විශාල වනු ඇති අතර එහි තවත් බොහෝ දේ තිබේද? ගැටලුවක් නැත - ඔබ කියනු ඇත, මන්ද අවසානයේ පාඩම අපි memo API සලකා බැලුවෙමු, කිසිදු අනවශ්‍ය නැවත ඇඳීම් වලක්වා ගැනීම සඳහා සංරචකයේ.

එබැවින් අපි අපගේ සංරචකය Items memo හි සහ සියල්ල සාදන්න. මාර්ගය වන විට මෙය කළ හැකිය අපනයනය කිරීමේදී Items:

export default memo(Items);

අපි memo ආයාත කිරීමට අමතක නොකරමු:

import { memo } from 'react';

දැන් අපි කොන්සෝලය විවෘත කර බොත්තම් මත ක්ලික් කරමු. සියලු උත්සාහයන් නිෂ්ඵලයි! අපි සංරචකය මතක තබා ගත්තද, බොත්තම ක්ලික් කළ විට 'click' සංරචකය Items තවමත් සෑම අවස්ථාවකම නැවත ඇදේ.

මුළු කාරණයම එයයි, ආණ්ඩුකාරය සංරචකය නැවත ඇදුන විට, එහි ශ්‍රිත නැවත සෑදේ - මෙය අපගේ ශ්‍රිතයටද අදාළ වේ addItem, අපි යවන්නේ Items වෙත.

හරියටම මේ මොහොතේ අපට කොකුව උදව් කරනු ඇත useCallback. අපි එය යොදමු. පළමුව, එය ආයාත කරන්න App වෙත:

import { useCallback } from 'react';

ඉන්පසු සරල ශ්‍රිත ප්‍රකාශය වෙනස් කරන්න addItem වෙත Function Expression, පළමු පරාමිතිය ලෙස useCallback සඳහා callback ආකාරයෙන් අපගේ ශ්‍රිතය. දෙවන පරාමිතිය හතරැස් වරහන් තුළ අපි දක්වන්නෙමු අනුයුක්තතා - සියලු ප්‍රතික්‍රියාශීලී විචල්‍යයන්, ශ්‍රිතයට සහභාගී වන, අපගේ නඩුවේදී මෙය අරාව items:

const addItem = useCallback(() => {
	setItems(() => [...items, 'New item']);
}, [items]);

සූදානම්! මේ ආකාරයෙන් අපි ශ්‍රිතය කෑෂ් කර ඇත. අපි නැවතත් බොත්තම් මත ක්ලික් කරමු සහ දැන් බොත්තම ක්ලික් කළ විට බලන්න 'click' අපගේ දරු සංරචකය නැත නැවත ඇදේ.

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

දරු සංරචකයක් සාදන්න Products, එහි ඔබට බොත්තමක් ඇත නව නිෂ්පාදනයක්. එය App හි තබන්න. මව් සංරචකයේ තත්වයක් සාදන්න නිෂ්පාදන අරාව සහ නව නිෂ්පාදනයක් එකතු කිරීමේ ශ්‍රිතය. ඒවා යවන්න දරුවාට ප්‍රොප් ලෙස, එහි ප්‍රතිදානය කරන්න ලැයිස්තුවක් ලෙස යවන ලද අරාව ul.

Products හි කොන්සෝලයේ පෙළ ප්‍රතිදානය කරන්න 'products render'. Products memo හි ඔතා තබන්න. ඡේදය සහ බොත්තම මත ක්ලික් කරන්න. විශ්වාස කර ගන්න, ඡේදය මත ක්ලික් කළ විට දරු සංරචකය තවමත් නැවත ඇදේ.

එකතු කිරීමේ ශ්‍රිතය කෑෂ් කරන්න නිෂ්පාදන, එය useCallback කොකුවෙන් ඔතා තබා ගැනීමෙන්. ඡේදය සහ බොත්තම මත ක්ලික් කරන්න. විශ්වාස කර ගන්න, ඡේදය මත ක්ලික් කළ විට, දරු සංරචකය තවදුරටත් නැවත ඇඳීමක් සිදු නොකරයි.