Context Api

ကျတော်တို့ လေ့လာလာလိုက်တာ အခုဆိုရင်တော်တော်လေးကို ခရီးရောက်လာပြီပေါ့

ကျတော်တို့ ဒီထက်နည်းနည်းလေး ပိုပြီးတော့ အလုပ်လုပ်ပုံလေးတွေကို ဆက်လေ့လာလိုက်ကြရအောင်

အဲဒါက ဘာလည်းဆိုတော့ context api လို့ ခေါ်တဲ့ ( global state management ) ပါပဲ

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

ဦးဆုံး ဒီပုံလေးကိုအရင်ကြည့်လိုက်ကြရအောင်

ဒီပုံမှာကျတော်တို့ ကြည့်လိုက်တဲ့အခါမှာ ဘာတွေရမှာလည်းဆိုတော့ APP component ထဲမှာ component

တခု ရှိမှာပေါ့ ဗျ သူ့ ရဲ့ အထဲမှာ နောက်ထပ် child တွေရှိလာပြီးတော့ အဲဒီ child ကနေပြီးတော့ နောက်ထပ်

grand child တွေ ခွဲလာတာကိုမြင်ရပါလိမ့်မယ်

ကျတော်တို့ ကအရင်တုန်းက component တွေကို data pass လုပ်တုန်းက props နဲ့ပေးကြတယ် မလား

အဲဒါက component က ၃ ဆင့်လောက်အထိ ဆိုရင် တော့ ဘာမှ တော့သိပ်မဖြစ်ဘူးဆိုပေမယ့်

ကျတော်တို့ရေး တဲ့ application က ကြီးလာတာနဲ့အမျှ data တွေက တဆင့်ပြီး တဆင့် လက်ဆင့်ကမ်း

passing လုပ်နေရတဲ့အခါကျရင် ဘာတွေဖြစ်လာတာလည်းဆိုတော့ ကျတော်တို့ application က

performance ကျ လာတယ်ဗျ ပြီးတော့ သူ့ကို ဘယ်လိုခေါ်ကြတာလည်းဆိုတော့

props drilling လို့ ခေါ်တယ် ဘာလို့ဆိုတော့ ကျတော်တို့ အခုလက်ရှိပြထားတဲ့ပုံအတိုင်းဆိုရင်

ကျတော်တို့က data တခုကို ဒီလိုလေး ပေးလိုက်ပြီးတော့ သူတို့က ဟို အောက်ဆုံးက component

ကနေပြီးတော့ အသုံးပြုချင်ရင် သူက အပေါ်က အဆင့်ဆင့် လက်ဆင့်ကမ်းလာတဲ့ ဟာတွေကို စောင့်နေရမှာပါ

အဲလိုမျိုးဖြစ်လာတဲ့အတွက် state တခုက ပြောင်းလဲပြီးတော့ အပေါ်ကို ပြန်တက်လာတဲ့ အခါကျရင်

တော်တော် လေးကို အဆင်မပြေဖြစ်လာမှာပါ အဲလိုမျိုး မဖြစ်ရလေအောင် အတွက် ကျတော်တို့က

ဘယ်လိုမျိုး အသုံးပြုရတာလည်းဆိုတော့ global state management တခု ဖြစ်တဲ့

context api ကိုအသုံးပြုပေးရပါတယ်

သူ့ကို အသုံးပြုလိုက်တဲ့အခါမှာ ခုနက လိုမျိုး state တွေ data တွေက component အဆင့်ဆင့်

ဖြတ်ပြီးတော့ သွားစရာမလိုတော့ဘဲနဲ့ ကျတော်တို့ လိုအပ်တဲ့ component ကနေပြီးတော့ ခေါ်ယူသုံးလို့ရသွားပါတယ်

ဒီလောက်ဆိုရင် ကျတော်တို့ context api တခု အလုပ်လုပ်ပုံကို မြင်သွားမယ်လို့ထင်ပါတယ်

ကျတော်တို့ ဒီလောက်ဆိုရင် code မှာ ဘယ်လိုအသုံးပြုရလည်းဆိုတာကို ဆက်လေ့လာလိုက်ကြရအောင်

ကျတော်တို့ အဲဒါလေးကို သိသွားပြီဆိုရင် code လိုက်ကြရအောင်

အရင်ဆုံး ကျတော်တို့ code မရေးခင်မှာ context တခု မှာ ဘယ်လိုမျိုး အဆင့်တွေရှိဖို့လိုတာလည်းဆိုတာကို

သိထားဖို့လိုတယ်

ပထမဆုံး ကျတော်တို့က သူ့ကို အရင်ဆုံး create လုပ်ပေးရပါတယ်

ဒုတိယ တဆင့်က ကျတော်တို့က create လုပ်လိုက်တဲ့ context ကို ဘယ် component

တွေကိုအသုံးပြုစေချင်တာလည်းဆိုပြီးတော့ provide လုပ်ပေးရပါတယ်

နောက်ဆုံး တဆင့်ကတော့ ကျတော်တို့က သူ့ကို ဘယ်လိုမျိုး ပြန်ပြီးတော့ consume ( အသုံးပြု ) ရမှာလည်း ပေါ့

ကျတော်တို့ အရင်ဆုံး file လေးတွေကို ဒီလို လေး တည်ဆောက်လိုက်ပါမယ်

အဲလိုလေး ရေးပြီး‌တော့ ကျတော်တို့ Component ထဲမှာ Child ကို import လုပ်ပြီးတော့ return လုပ်လိုက်ပါမယ်

ပြီးရင်တော့ ကျတော်တို့က Child ထဲမှာ GrandChildကို ထပ်ပြီးတော့ရေးလိုက်ပါမယ်

ပြီးသွားရင် ကျတော်တို့က App component မှာ အသုံးပြုလိုက်ပါမယ်

import Child from './child/Child.jsx'

export default function Component (){
    return <Child />
}

import GrandChild from './grand/GrandChild.jsx'

export default function Child () {
    return <GrandChild />
}

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

ဒီလိုလေးရေးသွားပြီးရင် ကျတော်တို့ browser မှာ သွားကြည့်လိုက်ကြရအောင်

အဲလိုလေးရေးလို့ပြီးသွားရင် ကျတော်တို့ context တစ်ခုကို create လုပ်ကြရအောင်

ဘယ်လိုမျိုးလုပ်ရမှာလည်းဆိုတော့

ကျတော်တို့က အရင်ဆုံး react ကနေပြီးတော့ createContext ဆိုတာလေးကို import လုပ်ရပါမယ်