တုံ့ပြန် ကျူတိုရီရယ်

React Home React Intro React စတင်လိုက်ပါ။ ES6 ကို တုံ့ပြန်ပါ။ Render HTML ကို တုံ့ပြန်ပါ။ JSX ကို တုံ့ပြန်ပါ။ အစိတ်အပိုင်းများကို တုံ့ပြန်ပါ။ React Class React Props အဖြစ်အပျက်များကို တုံ့ပြန်ပါ။ အခြေအနေများကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှုစာရင်းများ တုံ့ပြန်မှုပုံစံများ Router ကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှတ်စု CSS Styling ကို တုံ့ပြန်ပါ။ Sass Styling ကို တုံ့ပြန်ပါ။

React Hooks

Hook ဆိုတာဘာလဲ။ ပြည်နယ်ကိုအသုံးပြုပါ။ အသုံးပြုမှုအကျိုးသက်ရောက်မှု အသုံးအနှုန်း အသုံးပြုရန် Ref Reducer ကိုအသုံးပြုပါ။ ဖုန်းခေါ်ဆိုမှုကို အသုံးပြုပါ။ Memo ကိုအသုံးပြုပါ။ စိတ်ကြိုက်ချိတ်

တုံ့ပြန်လေ့ကျင့်မှုများ

တုံ့ပြန်မေးခွန်း တုံ့ပြန်လေ့ကျင့်မှုများ တုံ့ပြန်လက်မှတ်

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 သို့ရောက်ရှိရန် ပြည်နယ်ကို ဖြတ်သန်းရမည်ဖြစ်သည်။


w3schools CERTIFIED . 2022

လက်မှတ်ရယူပါ။

React modules များကိုဖြည့်ပါ၊ လေ့ကျင့်ခန်းများလုပ်ပါ၊ စာမေးပွဲကိုဖြေဆိုပြီး w3schools မှအသိအမှတ်ပြုခံရပါ။

$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>
  );
}

ယခုအခါ၊ ဤသစ်ပင်ရှိ အစိတ်အပိုင်းအားလုံးသည် အသုံးပြုသူ ဆက်စပ်အကြောင်းအရာသို့ ဝင်ရောက်နိုင်မည်ဖြစ်သည်။

useContextHook ကိုသုံးပါ။

ကလေးအစိတ်အပိုင်းတစ်ခုတွင် ဆက်စပ်အကြောင်းအရာကို အသုံးပြုရန်အတွက် useContextHook ကို အသုံးပြု၍ ၎င်းကို ဝင်ရောက်အသုံးပြုရန် လိုအပ်ပါသည်။

ပထမဦးစွာ 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"));