တုံ့ပြန်မှတ်စု
အသုံးပြုခြင်း memoသည် ၎င်း၏ props များမပြောင်းလဲပါက React သည် အစိတ်အပိုင်းတစ်ခုကို rendering ကိုကျော်သွားစေသည်။
ဒါက စွမ်းဆောင်ရည်ကို မြှင့်တင်ပေးနိုင်ပါတယ်။
ဤကဏ္ဍတွင် React Hooks ကို အသုံးပြုသည်။ Hooks ဆိုင်ရာ နောက်ထပ်အချက်အလက်များအတွက် React Hooks ကဏ္ဍ ကို ကြည့်ပါ ။
ပြဿနာ
ဤဥပမာတွင်၊ Todostodos မပြောင်းလဲသေးသည့်တိုင် အစိတ်အပိုင်းကို ပြန်လည်ဖော်ပြသည်။
ဥပမာ-
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
တိုးမြှင်ခလုတ်ကို နှိပ်လိုက်သောအခါ၊ Todosအစိတ်အပိုင်းကို ပြန်လည်ဖော်ပြသည်။
ဤအစိတ်အပိုင်းသည် ရှုပ်ထွေးပါက၊ ၎င်းသည် စွမ်းဆောင်ရည်ဆိုင်ရာ ပြဿနာများကို ဖြစ်စေနိုင်သည်။
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
ဖြေရှင်းချက်
ဒါကိုပြင်ဖို့၊ ငါတို့သုံး memoနိုင်တယ်။
အစိတ်အပိုင်းကို မလိုအပ်ဘဲ ပြန်လည်တင်ဆက်ခြင်းမှ memoထိန်းထားရန် အသုံးပြု ပါ။Todos
Todosအစိတ်အပိုင်းတင်ပို့မှုကို ထုပ်ပိုး ပါ memo-
ဥပမာ-
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
ယခုအခါ အစိတ်အပိုင်း အား props များမှတစ်ဆင့် အပ်ဒိတ်လုပ်ထား Todosသောအခါတွင်သာ အစိတ်အပိုင်းကို ပြန်လည် ဖော်ပြသည်။todos