React တွင် Context

နောက်ထပ် hook တစ်ခုကို မလေ့လာမီ၊ React တွင် context အကြောင်း နားလည်ထားရန် လိုအပ်ပါသည်။

ယခင်က ကျွန်ုပ်တို့သည် မိဘ component မှ ကလေး component များသို့ အချက်အလက်များကို props များဖြင့် ပို့ခဲ့ကြသည်။ သင့်တွင် Component အနည်းငယ်သာရှိပြီး အသုံးပြုလိုသော Component သို့ Props များကို 2-3 ကြိမ်ခန့်သာ ကလေး Component များမှတဆင့် ပြန်လည်ပို့ရန်လိုအပ်ပါက ဤနည်းလမ်းသည် ကောင်းမွန်ပါသည်။

ကြားခံ Component များတွင် ထို Props များကို လုံးဝအသုံးမပြုပါက (ထိုပြဿနာကို prop drilling ဟုခေါ်သည်) သို့မဟုတ် အချက်အလက်တူညီသော အချက်အလက်များကို Component အများအပြားသို့ ပို့ရန်လိုအပ်ပါက၊ ဤနည်းလမ်းသည် အလွန်မသင့်လျော်ပဲ ပြဿနာအမျိုးမျိုးကို ဖြစ်စေနိုင်သည်။

ထိုသို့သော အခြေအနေများတွင် context က ကူညီပေးနိုင်ပြီး၊ ၎င်းသည် မိဘ Component ၏ အချက်အလက်များကို Component tree အတွင်း တည်ရှိရာ မည်သည့်နေရာမှမဆို ကလေး Component များအားလုံးအတွက် ရရှိနိုင်စေရန် ပြုလုပ်ပေးပြီး Props များမှတဆင့် မပို့ဘဲ လုပ်ဆောင်ပေးနိုင်သည်။ ထို့ကြောင့် အချက်အလက်များကို လိုအပ်သော Component များကသာ လက်ခံရရှိမည်ဖြစ်သည်။

Context ကို အသုံးပြုရန်၊ ၎င်းကို စတင်ဖန်တီးရမည်။ ပထမဦးစွာ MyContext.js ဖိုင်တစ်ခုကို ဖန်တီးပြီး ထိုဖိုင်ထဲသို့ createContext function ကို import လုပ်ရမည်။

import { createContext } from 'react';

ယခု context object တစ်ခုကို ဖန်တီးပြီး MyContext variable ထဲသို့ သိမ်းဆည်းရမည်။ ထို variable ကို export လုပ်ရန် မမေ့ပါနှင့်။ ကျွန်ုပ်တို့၏ အခြေအနေတွင်၊ createContext အတွင်း ကနဦးတန်ဖိုးအဖြစ် null ကို သတ်မှတ်ထားသည်။ အကြောင်းမှာ ၎င်းသည် အရေးမကြီးသောကြောင့်ဖြစ်သည် (ကွင်းလွတ်ထားခြင်းလည်း ပြုလုပ်နိုင်သည်)။ မည်သည့်အခြားတန်ဖိုးမျှ ရှာမတွေ့ပါက context ဖတ်သည့်အခါတွင် ဤ default သတ်မှတ်ထားသော တန်ဖိုးသည် ပေါ်လာမည်ဖြစ်သည်။ ဤတန်ဖိုးသည် မည်သည့် data type မဆို ဖြစ်နိုင်သည်။

export const MyContext = createContext(null);

နောက်လာမည့် သင်ခန်းစာတွင်၊ သီးခြားဖိုင်များထဲတွင် တည်ရှိသော Component အများအပြားပါဝင်သည့် application တစ်ခုကို ဖန်တီးသွားပါမည်။ Component အားလုံး ဖိုင်တစ်ခုထဲတွင် ရှိပါက၊ context ဖန်တီးရန် သီးခြားဖိုင်တစ်ခု ပြုလုပ်မည်မဟုတ်သကဲ့သို့ ၎င်းကို export လုပ်မည်မဟုတ်ပါ။

ယခု MyContext.js ကို ဗလာ App component ထဲသို့ import လုပ်ကြပါစို့ - ကျွန်ုပ်တို့ အချက်အလက်များ ပို့လိုသော Component ထဲသို့ဖြစ်သည်။

import { MyContext } from './MyContext.js';

MyContext.js ဖိုင်ကို ဖန်တီးပြီး သင်ခန်းစာတွင် ဖော်ပြထားသည့်အတိုင်း ဗလာ App component ထဲသို့ import လုပ်ပါ။