React တွင် useEffect ၏ မှီခိုရာများ

ယခု ခလုတ်တစ်ခုကို နှိပ်လိုက်သည်နှင့် အရောင်ပြောင်းသည့် လုပ်ဆောင်ချက်ကို လုပ်ဆောင်ကြပါစို့။ အစမှတ်တစ်ခုသတ်မှတ်ပေးလျက် color ဟုခေါ်သော state တစ်ခုကို အရောင်အတွက် ဖန်တီးပါမည်။

const [color, setColor] = useState('green');

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

function App() {
	useEffect(() => {
		document.body.style.backgroundColor = color;
	}, [color]);
	
	...
}

ယခုအခါ ကျွန်ုပ်တို့၏ component ထဲသို့ အရောင်ပြောင်းရန် ခလုတ်တစ်ခု ထည့်ကြပါစို့။

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>change</button>
	</div>
);

ကျွန်ုပ်တို့၏ အရောင်ကို လိမ္မော်ရောင်သို့ ပြောင်းပေးမည့် ကလစ်နှိပ်ခြင်း လုပ်ဆောင်ချက်ကိုလည်း ထည့်ကြပါစို့။

function changeColor() {
	setColor('orange');
}

အသုံးပြုသူအမည်ဖြင့် state တစ်ခု ပေးထားသည်။ အမည် ပြောင်းလဲတိုင်း state ၏တန်ဖိုးကို browser ၏ local storage ထဲသို့ မှတ်တမ်းတင်ရန် လုပ်ဆောင်ပါ။