States in Functional Components

ဒီတစ်ခါ ကျတော်တို့ ဆက်ပြီးလေ့လာကြမှာက Functional component တွေထဲမှာ state

တစ်ခုကဘယ်လိုမျိုး အလုပ်လုပ်တာလည်းဆိုပီးတော့ပါ အရင်က ကျတော်တို့ က

functional component တွေထဲမှာ state တွေကို management လုပ်လို့မရဘူး

react 17.8 မှာ စတင်မိတ်ဆက်လိုက်တဲ့ React Hook တွေကြောင့် နောက်ပိုင်းကျရင်

ကျတော်တို့ state တွေကို functional မှာ အသုံးပြုလို့ရလာပါတယ်

ကဲ စလိုက်ကြရအောင်

အရင်ဆုံး ကျတော်တို့ functional component လေးတစ်ခုကိုရေးလိုက်ပါမယ်

import React from 'react'

function Functional() {
    return (
        <div>Functional</div>
    )
}
export default Functional

ပြီးသွားရင်တော့ ကျတော်တို့ က state ကို အသုံးပြုဖို့အတွက် react hook တစ်ခုဖြစ်တဲ့ useState hook

ကို ကျတော်တို့ import လုပ်ရပါမယ် ဘယ်ကနေပြီးတော့ import လုပ်ရမလဲဆိုတော့ react ကနေပြီးတော့

import လုပ်ပေးရမှာပါ

import {useState} from 'react'

အဲလိုမျိုး ကျတော်တို့ hook ကို import လုပ်ပြီးသွားရင် သူ့ကို အသုံးပြုရပါမယ် အသုံးမပြုသေးခင်မှာ

ကျတော်တို့က useState hook ဆိုတာက ဘာလည်းဆိုတာကို တချက်လေ့လာကြည့်ကြရအောင်

သူ့ကိုကျတော်တို့ ရေးတဲ့အခါကျရင် method လိုလေးမျိုးပြန်ခေါ်ပေးရပါတယ်

useState() အဲလိုလေး ပြန်အသုံးချရပါတယ်

သူကနေပြီးတော့ ကျတော်တို့ကို state နဲ့ setState method ဆိုတဲ့ value ၂ ခုကို array အနေနဲ့

return ပြန်ပေးပါတယ် အဲဒါကို ကျတော်တို့ က ဘယ်လိုမျိုး အသုံးပြုရမလဲဆိုတော့

const [count, setCount] = useState(0)

အဲလိုမျိုး အသုံးပြုတဲ့အခါမှာ ကျတော်ရေးထားတာက useState ရဲ့ အနောက်မှာပါတဲ့ parenthesis

ထဲမှာ ကျတော်တို့ 0 လေးကို ထည့်ပေးထားတာကို တွေ့ရမယ်ဗျ အဲဒါက ကျတော်တို့ ကinitial value

လေး ကိုသတ်မှတ်ပေးလိုက်တာပါ

သူ့အနောက်မှာပါတဲ့ count နဲ့ setCount ဆိုတာက ကျတော်တို့ state နဲ့ setState တွေပါပဲဗျ

တခုထူးဆန်းတာက ကျတော်တို့က class component ထဲမှာဆိုရင် state က object type အနေနဲ့

သတ်မှတ်ပေးရတာဖြစ်ပီးတော့ functional component ထဲမှာဆိုရင် သူက ကြိုက်တဲ့ data type

အနေနဲ့ သတ်မှတ်ပေးလို့ရသွားတာပါပဲ

အဲဒါဆိုရင်ကျတော်တို့က counter လေးကိုအရင်ဆုံးရေးလိုက်ကြရအောင်

import { useState } from 'react'

function Functional() {
    const [ count , setCount ] = useState(0)
    function addHandler () {
        setCount(count+1)
    }
    return (
        <>
            <h1>{count}</h1>
            <button onClick={addHandler}>Add 1</button>
        </>
    )
}
export default Functional

ကျတော်တို့ က class component ထဲမှာသုံးသွားတဲ့အတိုင်းပါပဲ count value ကို ကျတော်တို့ တိုက်ရိုက်

ရေးပြီးတော့ addHandler ဆိုတဲ့ function ထဲမှာ setCount ဆိုတဲ့ state change method လေးကို

အသုံး ပြု သွားတာပါ

ကုဒ်ကိုကြည့်လိုက်ရင် ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတာကိုမြင်သာမယ်ထင်ပါတယ်

တစ်ခုတော့မမေ့နဲ့ပေါ့ဗျာ ကျတော်တို့က component တွေကို ခွဲပြီးရေး ခဲ့ရင် အဲဒါကို

ကျတော်တို့ app component ထဲမှာ import လုပ်ပြီးတော့ အဲဒါကိုပြန်အသုံးပြုဖို့ မမေ့ကြပါနဲ့