رد الفعل مذكرة
سيؤدي الاستخدام memoإلى تخطي React لتصيير المكون إذا لم تتغير خصائصه.
هذا يمكن أن يحسن الأداء.
يستخدم هذا القسم خطافات React. راجع قسم React Hooks لمزيد من المعلومات حول الخطافات.
مشكلة
في هذا المثال ، Todosيعيد المكون تصيير حتى في حالة عدم تغيير todos.
مثال:
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إعادة عرض المكون.
إذا كان هذا المكون معقدًا ، فقد يتسبب في حدوث مشكلات في الأداء.
الحصول على شهادة!
أكمل وحدات React ، ونفّذ التمارين ، وخذ الامتحان واحصل على شهادة w3schools !!
95 دولارًا ENROLL
المحلول
لإصلاح هذا ، يمكننا استخدام 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);
الآن يتم Todosإعادة عرض المكون فقط عند todosتحديث العناصر التي تم تمريرها إليه من خلال الدعائم.