React useCallbackHook

React useCallbackHook သည် အလွတ်ရအောင် ပြန်ခေါ်သည့် လုပ်ဆောင်ချက်ကို ပြန်ပေးသည်။

၎င်းသည် ကျွန်ုပ်တို့အား အရင်းအမြစ်ဆိုင်ရာ အထူးကြပ်မတ်လုပ်ဆောင်မှုများကို သီးခြားခွဲထုတ်နိုင်စေခြင်းဖြင့် ၎င်းတို့သည် တင်ဆက်မှုတိုင်းတွင် အလိုအလျောက်လုပ်ဆောင်နိုင်မည်မဟုတ်ပေ။

Hook သည် useCallback၎င်း၏မှီခိုမှုတစ်ခုအား အပ်ဒိတ်လုပ်သောအခါမှသာ အလုပ်လုပ်ပါသည်။

ဒါက စွမ်းဆောင်ရည်ကို မြှင့်တင်ပေးနိုင်ပါတယ်။

ပြဿနာ

အသုံးပြုရသည့်အကြောင်းရင်းတစ်ခုမှာ useCallback၎င်း၏ props များမပြောင်းလဲပါက အစိတ်အပိုင်းတစ်ခုကို ပြန်လည်တင်ဆက်ခြင်းမှ တားဆီးရန်ဖြစ်သည်။

ဤဥပမာတွင်၊ ပြောင်းလဲမှု Todosမှလွဲ၍ အစိတ်အပိုင်းသည် ပြန်လည်လုပ်ဆောင်မည်မဟုတ်ဟု သင်ထင် နိုင်သည်-todos

import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

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

import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

၎င်းကို စမ်းသုံးကြည့်ပြီး အရေအတွက်တိုးသည့်ခလုတ်ကို နှိပ်ပါ။

မပြောင်းလဲ Todosသည့်တိုင် အစိတ်အပိုင်းသည် ပြန်လည်တင်ဆက်သည်ကို သတိပြုမိပါလိမ့်မည် ။todos

ဒါက ဘာကြောင့် အလုပ်မဖြစ်တာလဲ။ ကျွန်ုပ်တို့ အသုံးပြု memoနေသည်၊ ထို့ကြောင့် အရေအတွက်ကို တိုးလာသောအခါ အခြေအနေနှင့် လုပ်ဆောင်ချက် မပြောင်းလဲသောကြောင့် Todosအစိတ်အပိုင်းအား ပြန်လည်မဖော်ပြသင့်ပါ ။todosaddTodo

ဒါဟာ "အကိုးအကား တန်းတူညီမျှမှု" လို့ ခေါ်ပါတယ်။

အစိတ်အပိုင်းတစ်ခုကို ပြန်ပြီးတိုင်း၊ ၎င်း၏လုပ်ဆောင်ချက်များကို ပြန်လည်ဖန်တီးသည်။ ထို့အတွက်ကြောင့် addTodofunction သည် အမှန်တကယ် ပြောင်းလဲသွားပါသည်။

ဖြေရှင်းချက်

၎င်းကိုဖြေရှင်းရန် useCallbackမလိုအပ်ပါက လုပ်ဆောင်ချက်ကို ပြန်လည်ဖန်တီးခြင်းမှ ကာကွယ်ရန် ချိတ်ကို အသုံးပြုနိုင်ပါသည်။

အစိတ်အပိုင်းကို မလိုအပ်ဘဲ ပြန်လည်တင်ဆက်ခြင်းမှ useCallbackကာကွယ်ရန် Hook ကို အသုံးပြု ပါ-Todos

import { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = useCallback(() => {
    setTodos((t) => [...t, "New Todo"]);
  }, [todos]);

  return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

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

import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

ယခု အစိတ်အပိုင်းသည် prop ပြောင်းလဲ Todosသည့်အခါမှသာ ပြန်လည်ဖော်ပြပါမည် ။todos