رد فعل useMemoهوك
يُرجع useMemoخطاف React قيمة محفوظة في الذاكرة.
فكر في الحفظ كذاكرة تخزين مؤقت لقيمة بحيث لا تحتاج إلى إعادة حسابها.
يعمل useMemoالخطاف فقط عند تحديث أحد تبعياته.
هذا يمكن أن يحسن الأداء.
الخطاف و الخطاف متشابهان useMemo. useCallbackيتمثل الاختلاف الرئيسي useMemoفي إرجاع قيمة ذاكرة
useCallbackوإرجاع دالة محفوظة. يمكنك معرفة المزيد عن useCallbackذلك في فصل useCallback .
أداء
يمكن useMemoاستخدام الخطاف للحفاظ على الوظائف الباهظة الثمن والمكثفة الموارد من العمل بدون داع.
في هذا المثال ، لدينا وظيفة باهظة الثمن يتم تشغيلها في كل تصيير.
عند تغيير العدد أو إضافة المهام ، ستلاحظ تأخيرًا في التنفيذ.
مثال:
وظيفة أداء ضعيف. تعمل expensiveCalculationالوظيفة في كل تصيير:
import { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = expensiveCalculation(count);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));
الحصول على شهادة!
95 دولارًا ENROLL
يستخدمuseMemo
لإصلاح مشكلة الأداء هذه ، يمكننا استخدام useMemoالخطاف لحفظ expensiveCalculationالوظيفة. سيؤدي ذلك إلى تشغيل الوظيفة عند الحاجة فقط.
يمكننا إنهاء المكالمة باهظة الثمن باستخدام useMemo.
يقبل useMemoالخطاف معلمة ثانية للإعلان عن التبعيات. لن تعمل الوظيفة باهظة الثمن إلا عندما تتغير تبعياتها.
في المثال التالي ، لن تعمل الوظيفة الباهظة الثمن إلا عند count
تغييرها وليس عند إضافة المهام.
مثال:
مثال على الأداء باستخدام useMemoالخطاف:
import { useState, useMemo } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = useMemo(() => expensiveCalculation(count), [count]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));