React useMemo Hook - Các thông tin cơ bản
25/07/2023 01:19
Hook useMemochỉ chạy khi một trong các phần phụ thuộc của nó cập nhật. Cùng tìm hiểu thêm về React useMemo Hook ngay trong bài viết sau
React useMemoHook trả về một giá trị được ghi nhớ.
Hãy coi quá trình ghi nhớ giống như lưu vào bộ nhớ đệm một giá trị để không cần phải tính toán lại.
Hook useMemochỉ chạy khi một trong các phần phụ thuộc của nó cập nhật.
Điều này có thể cải thiện hiệu suất.
Các useMemovà useCallbackMóc tương tự nhau. Sự khác biệt chính là useMemotrả về một giá trị được ghi nhớ và useCallbacktrả về một hàm được ghi nhớ. Bạn có thể tìm hiểu thêm useCallbacktrong chương useCallback .
Hiệu suất
Hook useMemocó thể được sử dụng để giữ cho các chức năng sử dụng nhiều tài nguyên, đắt tiền không chạy một cách không cần thiết.
Trong ví dụ này, chúng ta có một hàm đắt tiền chạy trên mọi kết xuất.
Khi thay đổi số lượng hoặc thêm một việc cần làm, bạn sẽ nhận thấy sự chậm trễ trong quá trình thực thi.
Ví dụ:
Một chức năng hoạt động kém. Hàm expensiveCalculationchạy trên mọi kết xuất:
import { useState } from "react";
import ReactDOM from "react-dom/client";
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;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);Sử dụnguseMemo
Để khắc phục sự cố hiệu suất này, chúng ta có thể sử dụng useMemoHook để ghi nhớ expensiveCalculationchức năng. Điều này sẽ khiến chức năng chỉ chạy khi cần thiết.
Chúng ta có thể kết thúc lệnh gọi hàm đắt tiền bằng useMemo.
Hook useMemochấp nhận tham số thứ hai để khai báo các phụ thuộc. Chức năng đắt tiền sẽ chỉ chạy khi các phụ thuộc của nó đã thay đổi.
Trong ví dụ sau, chức năng đắt tiền sẽ chỉ chạy khi count được thay đổi chứ không phải khi việc cần làm được thêm vào.
Ví dụ:
Ví dụ về hiệu suất sử dụng useMemoHook:
import { useState, useMemo } from "react";
import ReactDOM from "react-dom/client";
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;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
