React တွင် state များ၏ တုံ့ပြန်မှု

ယခု တုံ့ပြန်မှုအလုပ်လုပ်ပုံကို ကြည့်ရအောင်။ ၎င်းသည် state ပြောင်းလဲသောအခါ အပြောင်းအလဲများကို စခရင်ပေါ်တွင် ချက်ချင်း ပြသပေးသည်။

နမူနာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် ထုတ်ကုန်အမည်ဆိုသည့် state တစ်ခုရှိသည်ဆိုပါစို့-

const [name, setName] = useState('prod');

ထုတ်ကုန်အမည်ကို markup ထဲတွင် ထုတ်ပြကြမည်-

return <div>
	<span>{name}</span>
</div>;

ယခု နှိပ်လိုက်သည့်အခါ ကျွန်ုပ်တို့၏ state ပြောင်းလဲသွားမည့် ခလုတ်တစ်ခု ပြုလုပ်ကြမည်-

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

နှိပ်ချက်ကို ကိုင်တွယ်သည့် function ထဲတွင် ထုတ်ကုန်အား အမည်အသစ်သတ်မှတ်ရန် setName function ကို အသုံးပြုမည်-

function clickHandler() {
	setName('xxxx');
}

ကုဒ်အားလုံးကို အတူတကွ စုစည်းကြမည်။ ခလုတ်ကိုနှိပ်ပြီးနောက် စာသားသည် ချက်ချင်း တန်ဖိုးအသစ်သို့ ပြောင်းလဲသွားမည်ဖြစ်သည်-

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

သီးခြား နှိပ်ချက်ကိုင်တွယ်သည့် function များ အသုံးပြုရန် မလိုအပ်ပါ။ အမည်မဲ့ arrow function ကို အသုံးပြုနိုင်သည်-

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

အသုံးပြုသူ၏ နာမည်နှင့် သူမိသားစုအမည် state များ ပေးထားသည်။ ၎င်းတို့ကို markup ထဲတွင် ထုတ်ပြပါ။ ဤ state များ ပြောင်းလဲရန် ခလုတ်များ ပြုလုပ်ပါ။