ตอบสนองuseMemoตะขอ
React useMemoHook ส่งคืนค่าที่บันทึกไว้
ให้คิดว่าการจดบันทึกเป็นการแคชค่าเพื่อจะได้ไม่ต้องคำนวณใหม่
Hook ทำงานเฉพาะเมื่อมี การuseMemoอัปเดตการพึ่งพาอย่างใดอย่างหนึ่งเท่านั้น
นี้สามารถปรับปรุงประสิทธิภาพการทำงาน
The useMemoและuseCallbackHooks มีความคล้ายคลึงกัน ความแตกต่างหลัก ๆ คือuseMemoคืนค่าที่บันทึกและ
useCallbackคืนค่าฟังก์ชันที่บันทึก คุณสามารถ เรียนรู้เพิ่มเติมuseCallbackในบท useCallback
ประสิทธิภาพ
useMemoHook สามารถใช้เพื่อป้องกันไม่ให้มีการทำงานที่ต้องใช้ทรัพยากรที่มีราคาแพงและสิ้นเปลืองทรัพยากรมากโดยไม่จำเป็น
ในตัวอย่างนี้ เรามีฟังก์ชันราคาแพงที่ทำงานบนทุกการเรนเดอร์
เมื่อเปลี่ยนจำนวนหรือเพิ่มสิ่งที่ต้องทำ คุณจะสังเกตเห็นความล่าช้าในการดำเนินการ
ตัวอย่าง:
ฟังก์ชั่นการทำงานที่ไม่ดี ฟัง ก์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'));
ใช้ useMemo
ในการแก้ไขปัญหาด้านประสิทธิภาพนี้ เราสามารถใช้useMemoHook เพื่อจดจำexpensiveCalculationฟังก์ชันได้ ซึ่งจะทำให้ฟังก์ชันทำงานเมื่อจำเป็นเท่านั้น
เราสามารถห่อการเรียกฟังก์ชันราคาแพงด้วยuseMemo.
Hook ยอมรับพารามิเตอร์ ที่useMemoสองเพื่อประกาศการพึ่งพา ฟังก์ชันราคาแพงจะทำงานก็ต่อเมื่อการขึ้นต่อกันมีการเปลี่ยนแปลง
ในตัวอย่างต่อไปนี้ ฟังก์ชันราคาแพงจะทำงานก็ต่อเมื่อcount
มีการเปลี่ยนแปลงและจะไม่ทำงานเมื่อมีการเพิ่มสิ่งที่ต้องทำ
ตัวอย่าง:
ตัวอย่างประสิทธิภาพโดยใช้useMemoHook:
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'));