Context Hook အသုံးပြုမှုကို တုံ့ပြန်ပါ။
React Context
React Context သည် တစ်ကမ္ဘာလုံးရှိ ပြည်နယ်များကို စီမံခန့်ခွဲရန် နည်းလမ်းတစ်ခုဖြစ်သည်။
တစ်ကိုယ်တည်း useState
ထက် နက်ရှိုင်းစွာ အသိုက်အမြုံရှိသော အစိတ်အပိုင်းများကြား အခြေအနေအား မျှဝေရန် Hook နှင့် တွဲသုံးနိုင်သည် ။useState
ပြဿနာ
ပြည်နယ်ကို အသုံးပြုခွင့် လိုအပ်သည့် စတန်းတွင် အမြင့်ဆုံး ပင်မ အစိတ်အပိုင်းက ပြည်နယ်ကို ထိန်းထားသင့်သည်။
ဥပမာအနေဖြင့်၊ ကျွန်ုပ်တို့တွင် nested အစိတ်အပိုင်းများစွာရှိသည်။ stack ၏ အပေါ်နှင့်အောက်ခြေရှိ အစိတ်အပိုင်းသည် အခြေအနေသို့ ဝင်ရောက်ခွင့် လိုအပ်ပါသည်။
ဆက်စပ်မှုမရှိဘဲ ၎င်းကိုလုပ်ဆောင်ရန်၊ ကျွန်ုပ်တို့သည် အသိုက်အဝန်းတစ်ခုစီမှ အစိတ်အပိုင်းတစ်ခုစီမှတစ်ဆင့် အခြေအနေကို "props" အဖြစ် ဖြတ်သန်းရန် လိုအပ်ပါသည်။ ဒါကို prop drilling လို့ခေါ်ပါတယ်။
ဥပမာ-
nested အစိတ်အပိုင်းများမှတဆင့် "props" ကိုဖြတ်သန်းခြင်း-
import { useState } from "react";
import ReactDOM from "react-dom";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
အစိတ်အပိုင်း 2-4 သည် ပြည်နယ်ကို မလိုအပ်သော်လည်း၊ ၎င်းသည် အစိတ်အပိုင်း 5 သို့ရောက်ရှိရန် ပြည်နယ်ကို ဖြတ်သန်းရမည်ဖြစ်သည်။
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
အဖြေ
ဖြေရှင်းချက်သည် အကြောင်းအရာကို ဖန်တီးရန်ဖြစ်သည်။
အကြောင်းအရာဖန်တီးပါ။
အကြောင်းအရာဖန်တီးရန်၊ ၎င်းကို တင်သွင်းပြီး createContext
အစပြုရပါမည်။
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
နောက်တစ်ခုကတော့ အခြေအနေအခြေအနေနဲ့ ဆက်စပ်မှုလိုအပ်တဲ့ အစိတ်အပိုင်းတွေရဲ့သစ်ပင်ကို ခြုံဖို့ Context Provider ကို အသုံးပြုပါမယ်။
ဆက်စပ်ပံ့ပိုးသူ
Context Provider တွင် ကလေးအစိတ်အပိုင်းများကို ခြုံပြီး ပြည်နယ်တန်ဖိုးကို ပေးဆောင်ပါ။
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
ယခုအခါ၊ ဤသစ်ပင်ရှိ အစိတ်အပိုင်းအားလုံးသည် အသုံးပြုသူ ဆက်စပ်အကြောင်းအရာသို့ ဝင်ရောက်နိုင်မည်ဖြစ်သည်။
useContext
Hook ကိုသုံးပါ။
ကလေးအစိတ်အပိုင်းတစ်ခုတွင် ဆက်စပ်အကြောင်းအရာကို အသုံးပြုရန်အတွက် useContext
Hook ကို အသုံးပြု၍ ၎င်းကို ဝင်ရောက်အသုံးပြုရန် လိုအပ်ပါသည်။
ပထမဦးစွာ useContext
သွင်းကုန်ထုတ်ပြန်ချက်တွင် ထည့်သွင်းပါ-
import { useState, createContext, useContext } from "react";
ထို့နောက် အစိတ်အပိုင်းအားလုံးတွင် အသုံးပြုသူ၏အကြောင်းအရာကို သင်ဝင်ရောက်နိုင်သည်-
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
နမူနာအပြည့်အစုံ
ဥပမာ-
ဤသည်မှာ React Context ကိုအသုံးပြုထားသော နမူနာအပြည့်အစုံဖြစ်သည် ။
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));