React useMemoHook
React useMemoHook trả về một giá trị được ghi nhớ.
Hãy coi ghi nhớ như một giá trị lưu vào bộ nhớ đệm để nó không cần phải tính toán lại.
useMemoHook chỉ 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.
The useMemovà useCallbackHooks cũng tương tự như vậy. 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 .
Màn biểu diễn
useMemoHook có thể được sử dụng để giữ cho các chức năng tốn kém, tốn nhiều tài nguyên không hoạt động 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 lần hiển thị.
Khi thay đổi số lượng hoặc thêm việc cần làm, bạn sẽ nhận thấy sự chậm trễ trong quá trình thực thi.
Thí dụ:
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";
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'));
Được chứng nhận!
$ 95 GHI DANH
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ớ expensiveCalculationhàm. Điều này sẽ làm cho chức năng chỉ chạy khi cần thiết.
Chúng ta có thể kết thúc cuộc gọi hàm đắt tiền với useMemo.
useMemoHook chấp nhận một tham số thứ hai để khai báo các phụ thuộc . Hàm đắt tiền sẽ chỉ chạy khi các phụ thuộc của nó đã thay đổi.
Trong ví dụ sau, hàm đắ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.
Thí dụ:
Ví dụ về hiệu suất sử dụng 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'));