React တွင် Refs များနှင့်အလုပ်လုပ်ရန် useRef Hook

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် refs များနှင့် အလုပ်လုပ်ပါမည်။ ရှင်းလင်းစေရန် hook <useRef ၏အလုပ်လုပ်ပုံကို hook <useState နှင့် နှိုင်းယှဉ်၍ ကြည့်ကြပါစို့။

ခလုတ်တစ်ခုပါဝင်သည့် component တစ်ခုကို ဖန်တီးကြပါစို့။

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

Component အတွင်းသို့ <useState ကို import လုပ်ပါမည်။

import { useState } from 'react';

ပြီးနောက် state <state ကို သတ်မှတ်ပါမည်။

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

ယခု ကျွန်ုပ်တို့သည် ခလုတ်ကိုနှိပ်လိုက်သောအခါတွင် ကျွန်ုပ်တို့၏ <state သည် <1 တိုးသွားစေမည်။ State ၏တန်ဖိုးကို ခလုတ်ပေါ်ရှိစာသားထဲတွင် တိုက်ရိုက်ထုတ်ပြပါမည်။

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

ခလုတ်ကိုနှိပ်ခြင်းကို ကိုင်တွယ်ရန် function <handleStateClick ကို ဖော်ပြပါမည်။

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

ခလုတ်ကို နှိပ်ကြည့်ပါက state ၏တန်ဖိုး မည်သို့တိုးလာသည်ကို မြင်ရပါမည်။

ယခု state ကိုအသုံးမပြုဘဲ ref ကိုအသုံးပြု၍ component <App ကို ဖန်တီးကြည့်ကြပါစို့။

ပထမဦးစွာ၊ component အတွင်းသို့ <useRef ကို import လုပ်ပါမည်။

import { useRef } from 'react';

ပြီးနောက် ref <ref ကို သတ်မှတ်ပါမည်။ Hook <useRef သည် <current ဟူသော property တစ်ခုတည်းသာရှိသည့် ref object တစ်ခုကို ပြန်ပေးပြီး ၎င်းသည် နောက်ပိုင်းတွင် ကျွန်ုပ်တို့စိတ်ဝင်စားမည့်အရာဖြစ်သည်။ ၎င်း၏ကနဦးတန်ဖိုးကို <0 သတ်မှတ်ပါမည်။

const ref = useRef(0);

ခလုတ်ပေါ်သို့ နှိပ်ခြင်းအတွက် event handler တစ်ခုထည့်ပါမည်။ <ref ကိုယ်တိုင်ကို ဖတ်ခြင်း/ပြောင်းလဲခြင်းမဟုတ်ဘဲ ၎င်း၏ property <current ကိုသာဖတ်ရန်/ပြောင်းလဲရန် လိုအပ်သည်ကို သတိရပါ။

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

ကျွန်ုပ်တို့၏ခလုတ်ကိုနှိပ်ခြင်းအတွက် event handler function ကို ထည့်ပါမည်။ ဤနေရာတွင် state ဖြင့်ပြထားသောဥပမာကဲ့သို့ပင် <current ကို <1 တိုးပါမည်။ ၎င်း၏တန်ဖိုးကိုပြောင်းလဲရန် <setState function လိုအပ်သည့် state နှင့်မတူဘဲ၊ ref ၏ property နှင့်အတူ ကျွန်ုပ်တို့သည် တိုက်ရိုက်အလုပ်လုပ်ပါသည်။

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

ယခု ကျွန်ုပ်တို့၏ခလုတ်ကို နှိပ်ကြည့်ပါ။ ကျွန်ုပ်တို့ ဘာတွေမြင်ရသနည်း။ ၎င်းကိုနှိပ်သောအခါ၊ အစက <0 ဖြစ်ခဲ့သကဲ့သို့ပင် ပြောင်းလဲမသွားပါ။

တန်ဖိုးပြောင်းလဲခြင်းရှိမရှိ သံသယဝင်စရာဖြစ်လာနိုင်ပါသည်။ ကျွန်ုပ်တို့စစ်ဆေးကြည့်ကြပါစို့။ ဤအတွက် event handler function ထဲတွင် <current ၏တန်ဖိုးကို console တွင် ထုတ်ပြသည့် code စာကြောင်းတစ်ခုထပ်ထည့်ပါမည်။

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

ယခု၊ browser ထဲရှိ console ကိုဖွင့်ကာ ခလုတ်ကိုထပ်မံနှိပ်ပြီး တန်ဖိုးသည် တကယ်ပင် နှိပ်သည့်အကြိမ်တိုင်းတွင် ပြောင်းလဲနေပြီး လှည့်စားမှုမရှိကြောင်း သေချာစေပါမည်။

ယခုကျွန်ုပ်တို့မြင်ရသည့်အတိုင်း state နှင့်မတူဘဲ၊ ref ၏တန်ဖိုးပြောင်းလဲခြင်းသည် component ၏ re-render ကို မဖြစ်စေပါ။ ထို့ကြောင့် ခလုတ်ပေါ်ရှိစာသားထဲတွင် ကနဦးတန်ဖိုး <0 ကိုသာ အကြိမ်တိုင်းမြင်ရခြင်းဖြစ်သည်။

ထို့ကြောင့်၊ သင့်ဒေတာများကို render လုပ်ရန်အသုံးပြုပါက ၎င်းတို့ကို state ထဲတွင်သိမ်းထားပါ။ သင်သည် re-render မလိုအပ်ပါက၊ ထိုသို့သောအခြေအနေတွင် refs များကိုအသုံးပြုခြင်းသည် ပို၍ထိရောက်မှုရှိနိုင်သည်။

သင့် component တွင် စာသား <'text' ပါဝင်သည့် စာပိုဒ်တစ်ခုနှင့် ခလုတ်တစ်ခုရှိသည်ဆိုပါစို့။ ခလုတ်ကိုနှိပ်သည့်အကြိမ်တိုင်းတွင် စာပိုဒ်၏အဆုံးသို့ အာမေဋိတ်အမှတ် (!) ပေါင်းထည့်သွားစေရန် ပြုလုပ်ပါ။ State ကိုအသုံးပြု၍ ပြုလုပ်ပါ။

Component <App ကို ဖန်တီးပါ၊ သို့သော်ယခုအခါ state အစား ref ကိုအသုံးပြုပါ။ ခလုတ်ကိုနှိပ်သောအခါ စာပိုဒ်၏စာသားမပြောင်းလဲကြောင်း သေချာပါစေ။ စာပိုဒ်၏စာသားကို console တွင်ထုတ်ပြခြင်းကိုလည်း ထည့်ပါ၊ ၎င်းကိုဖွင့်ကာ စာသားအမှန်တကယ်ပြောင်းလဲကြောင်း သေချာပါစေ။