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

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

React Hooks

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

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

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

React useReducerHook


Hook သည် useReducerHook နှင့်ဆင်တူသည် useState

၎င်းသည် စိတ်ကြိုက်ပြည်နယ်ဆိုင်ရာ ယုတ္တိဗေဒအတွက် ခွင့်ပြုသည်။

ရှုပ်ထွေးသော ယုတ္တိဗေဒကို အားကိုးသော နိုင်ငံအများအပြားကို ခြေရာခံမိပါက useReducerအသုံးဝင်ပေမည်။


အထားအသို

useReducer Hook သည် အကြောင်းပြချက်နှစ်ခုကို လက်ခံသည်။

useReducer(<reducer>၊ <initialState>)

reducerလုပ်ဆောင်ချက်တွင် သင်၏ စိတ်ကြိုက်နိုင်ငံတော် လော့ဂျစ်ပါရှိပြီး ရိုးရှင်းသော initialStateတန်ဖိုးတစ်ခု ဖြစ်နိုင်သော်လည်း ယေဘုယျအားဖြင့် အရာဝတ္ထုတစ်ခု ပါဝင်မည်ဖြစ်သည်။

useReducerHook သည် လက်ရှိ နှင့် stateနည်းလမ်းတစ်ခုကို dispatchပြန်ပေးသည်။

ဤသည်မှာ useReducerတန်ပြန်အက်ပ်တစ်ခု၏ ဥပမာတစ်ခုဖြစ်သည်။

ဥပမာ-

import { useReducer } from "react";
import ReactDOM from "react-dom";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

ReactDOM.render(<Todos />, document.getElementById('root'));


ဤအရာသည် ပြီးပြည့်စုံသော အခြေအနေကို ခြေရာခံရန် ယုတ္တိမျှသာဖြစ်သည်။

လုပ်စရာ တစ်ခုကို ထည့်ရန်၊ ဖျက်ရန်နှင့် ပြီးမြောက်ရန် ယုတ္တိဗေဒအားလုံးကို useReducerနောက်ထပ်လုပ်ဆောင်ချက်များကို ထည့်သွင်းခြင်းဖြင့် Hook တစ်ခုတည်းအတွင်းတွင် ထည့်သွင်းနိုင်သည်။