react-context.md

React Context

React ကို အခြေခံလောက် လေ့လာဖူးသူတိုင်း React Component တွေမှာ ပုံမှန်အားဖြင့် Data တွေဟာ Parent to Child လက်ဆင့်ကမ်း props အနေနဲ့ စီးဆင်းရတာကို သိရှိကြပြီး ဖြစ်ပါတယ်။ ဥပမာ ဒီလိုပါ။

function App(props) {
    return <Header value="ReApp" />
}

function Header(props) {
    return <Title value={props.value} />
}

function Title(props) {
    return <h1>{props.value}</h1>
}

App Component က ReApp ဆိုတဲ့ တန်ဖိုးကို Header Component ထံ value props အနေနဲ့ ပေးပါတယ်။ Header က လက်ခံရရှိတဲ့ value ကို Title Component ရဲ့ props အဖြစ် လက်ဆင့်ကမ်း ပေးပါတယ်။ နောက်ဆုံးမှာ Title Component က လက်ခံရရှိတဲ့ value props ကို အသုံးပြုပါတယ်။ ဒီလို တစ်ဆင့်ချင်းသာ သွားရပြီး App က Title အကို အဆင့်ကျော် တိုက်ရိုက် Data ပေးလို့မရသလို၊ Title ကလည်း App ဆီက Data တွေကို အဆင့်ကျော်ပြီး လှမ်းယူလို့ မရပါဘူး။

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

const MyContext = React.createContext();

function App(props) {
    return (
        <MyContext.Provider value="ReApp" />
            <Header />
        </MyContext.Provider>
    )
}

function Header(props) {
    return <Title />
}

function Title(props) {
    return (
        <MyContext.Consumer>
            { value => <h1>{value}</h1> }
        </MyContext.Consumer>
    )
}

ပထမဆုံးအနေနဲ့ App Component က value ကို Context Provider မှာပေးလိုက်ပါတယ်။ Header ကို မပေးတော့ပါဘူး။ Header ကလည်း Title ကို ဘာမှမပေးတော့ပါဘူး။ Title က Context Consumer ကိုသုံးပြီးတော့ value ကို တိုက်ရိုက် ရယူလိုက်ခြင်းပဲ ဖြစ်ပါတယ်။ ဒါကြောင့် လိုအပ်တဲ့ Data ကို အဆင့်ဆင့် လက်ဆင့်ကမ်းဖို့ မလိုတော့ပဲ တိုက်ရိုက်ရရှိသွားပါတယ်။ နမူနာမှာက Component သုံးခုတည်းမို့လိုပါ။ လက်တွေ့မှာ Component ပေါင်းအဆင့်ဆင့် ဖြစ်လာမယ်ဆိုရင် ဒီနည်းက သိသိသာသာ အသုံးဝင်မှာပဲ ဖြစ်ပါတယ်။

ဒီကုဒ်ကို နောက်တစ်မျိုးပြောင်းရေးပြပါဦးမယ်။

const MyContext = React.createContext("ReApp");

function App(props) {
    return <Header />
}

function Header(props) {
    return <Title />
}

function Title(props) {
    const value = React.useContext(MyContext)
    return <h1>{value}</h1>
}

Context Provider တွေ Context Consumer တွေ မပါတော့ပါဘူး။ ပထမဆုံး createContext() မှာကတည်းက Default Value ပေးခဲ့ပါတယ်။ React က Context Provider မရှိရင် Default Value ကို သုံးပေးသွားမှာပါ။ Title မှာ Context ကို အသုံးပြုဖို့အတွက် React ရဲ့ Feature သစ်ဖြစ်ကို Context Hook ကို အသုံးပြုလိုက်လို့ Context Consumer ကို သုံးစရာ မလိုတော့ပါဘူး (Hook အကြောင်း ပြီးခဲ့တဲ့ Article မှာ ပြန်ကြည့်ပါ)။

အကယ်၍ Class Component တွေကို အသုံးပြုပြီး ရေးလိုတယ်ဆိုရင်လည်း အခုလို ရေးနိုင်ပါတယ်။

const MyContext = React.createContext("ReApp");

class App extends React.Component {
    render() {
        return <Header />
    }
}

class Header extends React.Component {
    render() {
        return <Title />
    }
}

class Title extends React.Component {
    static contextType = MyContext;
    
    render() {
        return <h1>{this.context}</h1>
    }
}

အသုံးပြုလိုတဲ့ Title Component မှာ contextType ကို static class filed အနေနဲ့ ကြေငြာပေးပြီးမှ သုံးရပါတယ်။ သုံးတဲ့အခါမှာ this.context ကနေ တစ်ဆင့်သာ အသုံးပြုရလို့ မျက်စိလည်ချင်စရာပါ။ Function Component ရဲ့ ရေးထုံးကတော့ ပိုပြီး နားလည်ရရော အသုံးပြုရပါလွယ်မယ်လို့ ထင်ပါတယ်။

Good read