React හි refs සමඟ වැඩ කිරීම සඳහා useRef Hook

මෙම පාඩමෙන් අපි refs සමඟ වැඩ කරමු. පැහැදිලිව තේරුම් ගැනීමට අපි useRef hook එකේ ක්‍රියාකාරිත්වය useState hook එක සමඟ සංසන්දනය කරමු.

අපි බොත්තමක් සහිත සංරචකයක් සාදමු:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

අපි සංරචකයට useState ආයාත කරමු:

import { useState } from 'react';

අපි state state එකක් සාදමු:

const [state, setState] = useState(0);

දැන් අපි බොත්තම ක්ලික් කළ විට අපගේ state 1 කින් වැඩි වන පරිදි කරමු. state එකේ අගය අපි කෙලින්ම බොත්තමේ ලිපිය තුළ පෙන්වමු:

<button onClick={handleStateClick}>
	state click: {state}
</button>

අපි බොත්තම ක්ලික් කිරීම සැකසීම සඳහා handleStateClick ශ්‍රිතය ලියමු:

function handleStateClick() {
	setState(state + 1);
}

බොත්තම ක්ලික් කර බලමු, state අගය වැඩි වන ආකාරය.

දැන් අපි App සංරචකය නැවත සාදමු, නමුත් state එක භාවිතා නොකර ref එකක් භාවිතා කරමු.

පළමුව, අපි සංරචකයට useRef ආයාත කරමු:

import { useRef } from 'react';

අපි ref ref එකක් සාදමු. useRef hook එකේ ප්‍රතිඵලය වන්නේ තනි දේපලක් සහිත ref වස්තුවකි current, එය පසුව අපට අවශ්‍ය වනු ඇත. අපි එහි ආරම්භක අගය 0 ලෙස සකසමු:

const ref = useRef(0);

අපි බොත්තමට ක්ලික් සැකසුම්කරු එකක් යොදමු. මතක තබා ගන්න, අපි කියවිය/වෙනස් කළ යුත්තේ ref වස්තුවම නොව එහි දේපල current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

අපගේ බොත්තම ක්ලික් කිරීම සැකසීම සඳහා ශ්‍රිතය එක් කරමු. මෙහිදී අපි current 1 කින් වැඩි කරමු, state සමඟ කල පෙර උදාහරණයේ මෙනි. State වලින් වෙනස්ව, එහි අගය වෙනස් කිරීමට ශ්‍රිතයක් setState අවශ්‍ය වන අතර, ref වස්තුවේ දේපල සමඟ අපි කෙලින්ම වැඩ කරමු:

function handleRefClick() {
	ref.current = ref.current + 1;
}

දැන් අපගේ බොත්තම ක්ලික් කර බලමු. අපි මොනවා දකිමුද? එය ක්ලික් කළ විට, ආරම්භයේ 0 වූ අගය වෙනස් නොවේ.

ඇත්ත වශයෙන්ම, අගය සම්පූර්ණයෙන්ම වෙනස් වේද යන සැකයක් ඇති විය හැකිය. අපි එය පරීක්ෂා කර බලමු. මේ සඳහා ශ්‍රිතය සැකසුම්කරු තුළ current අගය console එකට ප්‍රතිදානය කරන කේත පේලිය තව එකක් එකතු කරමු:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

දැන්, බ්‍රවුසරයේ console එක විවෘත කර නැවතත් බොත්තම ක්ලික් කර බලමු සහ අගය සැබවින්ම සෑම ක්ලිකයකම වෙනස් වන බවට විශ්වාස කරමු.

දැන් අපට පෙනෙන්නේ state එකට වඩා, ref එකේ අගය වෙනස් කිරීමෙන් සංරචකය නැවත තැනීමක් (render) සිදු නොවන බවයි. එබැවින් අපි සෑම විටම බොත්තමේ ලිපිය තුළ ආරම්භක අගය 0 පමණක් දකිමු.

එබැවින්, ඔබගේ දත්ත නැවත තැනීම (render) සඳහා භාවිතා වන්නේ නම්, ඒවා state එකේ ගබඩා කරන්න, නැවත තැනීම අවශ්‍ය නැති නම්, එවැනි අවස්ථාවන්හිදී refs භාවිතා කිරීම වඩාත් කාර්යක්ෂම විය හැකිය.

ඔබේ සංරචකයේ 'text' ලිපියක් සහිත ඡේදයක් සහ බොත්තමක් ඇතැයි සිතමු. බොත්තම ක්ලික් කරන සෑම අවස්ථාවකම ඡේදයේ ලිපිය අවසානයට හරස් අඩ්ඩියක් (exclamation mark) එකතු වන පරිදි කරන්න. මෙය state එක භාවිතයෙන් කරන්න.

App සංරචකයක් සාදන්න, නමුත් state එක වෙනුවට දැන් ref එකක් භාවිතා කරන්න. බොත්තම එබූ විට ඡේදයේ ලිපිය වෙනස් නොවන බවට විශ්වාස කරන්න. ඡේදයේ ලිපිය console එකට ද ප්‍රතිදානය කරන්න, එය විවෘත කර බලා, ඇත්තෙන්ම ලිපිය වෙනස් වන බවට විශ්වාස කරන්න.