ReactJS - Sử dụng useMemo: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn lập trình viên React! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những hook mạnh mẽ của React: useMemo. Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ hướng dẫn bạn từng bước qua khái niệm này, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và cùng nhau bắt đầu hành trình thú vị này!

useMemo là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu useMemo là gì. Hãy tưởng tượng bạn đang nướng bánh quy (tôi thích ví dụ này vì, à, ai lại không thích bánh quy?). Bạn có một công thức yêu cầu một số phép toán phức tạp để xác định lượng chocolate chips hoàn hảo. Bây giờ, bạn có sẽ tính toán lại mỗi lần bạn nướng bánh quy, hay bạn sẽ viết nó ra và tái sử dụng? Đó chính là điều useMemo làm - nó ghi nhớ (hoặc "ghi nhớ hóa" - memoize) kết quả của một phép toán để bạn không phải tính toán lại không cần thiết.

Trong thuật ngữ React, useMemo là một hook cho phép bạn lưu trữ kết quả của một phép toán giữa các lần render lại. Nó giống như có một trợ lý siêu thông minh ghi nhớ các nhiệm vụ phức tạp cho bạn!

Định nghĩa của hook useMemo

Hãy cùng nhìn vào cách chúng ta thực sự sử dụng hook useMemo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Đừng hoảng hốt! Tôi biết rằng điều này có thể trông有点scary ban đầu, nhưng hãy cùng phân tích nó:

1. useMemo là tên của hook của chúng ta.
2. Nó nhận hai đối số:

• Một hàm thực hiện phép toán của chúng ta (() => computeExpensiveValue(a, b))
• Một mảng các phụ thuộc ([a, b])

3. Nó trả về một giá trị ghi nhớ hóa.

Hãy nghĩ về nó như này: useMemo đang nói, "Hey React, chỉ chạy phép toán này nếu a hoặc b thay đổi. Nếu không, chỉ cần đưa cho tôi kết quả bạn nhớ từ lần trước."

Áp dụng hook useMemo

Bây giờ, hãy nhìn useMemo trong hành động với một ví dụ thực tế. Hãy tưởng tượng chúng ta đang xây dựng một giỏ hàng cho một cửa hàng trực tuyến (vì ai lại không thích mua sắm trực tuyến?).

import React, { useMemo, useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React T-Shirt", price: 20 },
{ id: 2, name: "React Hoodie", price: 40 },
{ id: 3, name: "React Cap", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Calculating total price...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>Your Shopping Cart</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Total: ${totalPrice}</h3>
</div>
);
}

Hãy phân tích điều này:

1. Chúng ta có một giỏ hàng với một số mặt hàng, mỗi mặt hàng có tên và giá.
2. Chúng ta sử dụng useMemo để tính tổng giá của tất cả các mặt hàng trong giỏ hàng.
3. Phép toán chỉ được chạy lại khi cart thay đổi (đó là điều [cart] ở cuối làm).
4. Chúng ta hiển thị mỗi mặt hàng và tổng giá.

Bây giờ, tại sao điều này lại hữu ích? Hãy tưởng tượng nếu việc tính tổng giá là một hoạt động rất phức tạp (có thể liên quan đến giảm giá, thuế, v.v.). Nếu không có useMemo, React sẽ tính toán lại mỗi lần thành phần render lại, ngay cả khi giỏ hàng không thay đổi. Với useMemo, nó chỉ tính toán lại khi cần thiết, có thể tiết kiệm rất nhiều thời gian xử lý!

Giữ nguyên tham chiếu

Một tính năng siêu tuyệt vời khác của useMemo là khả năng giữ nguyên tham chiếu. "Điều đó là gì?" Tôi nghe bạn hỏi. Hãy để tôi giải thích với một ví dụ khác.

Hãy tưởng tượng bạn đang xây dựng một ứng dụng danh sách công việc (vì mỗi lập trình viên đều đã từng xây dựng một ứng dụng như vậy, hãy tin tôi!). Bạn muốn lọc các nhiệm vụ dựa trên trạng thái của chúng.

import React, { useMemo, useState } from 'react';

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Learn React", completed: false },
{ id: 2, text: "Build amazing apps", completed: false },
{ id: 3, text: "Change the world", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Filtering todos...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2>My Todo List</h2>
<button onClick={() => setFilter('all')}>All</button>
<button onClick={() => setFilter('active')}>Active</button>
<button onClick={() => setFilter('completed')}>Completed</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

Trong ví dụ này:

1. Chúng ta có một danh sách công việc và một trạng thái lọc.
2. Chúng ta sử dụng useMemo để tạo một danh sách công việc đã lọc dựa trên trạng thái lọc hiện tại.
3. Danh sách đã lọc chỉ được tính toán lại khi todos hoặc filter thay đổi.

Phép thuật ở đây là filteredTodos sẽ luôn là cùng một đối tượng tham chiếu除非 todos hoặc filter thay đổi. Điều này rất quan trọng cho việc tối ưu hóa hiệu suất, đặc biệt là khi truyền danh sách này cho các thành phần con.

Kết luận

Và thế là chúng ta đã cùng nhau hành trình qua thế giới của useMemo, từ việc hiểu khái niệm cơ bản đến việc nhìn thấy nó trong hành động với các ví dụ thực tế. Nhớ rằng, useMemo giống như một người bạn trung thành, luôn sẵn sàng giúp bạn tối ưu hóa ứng dụng React của mình bằng cách tránh các phép toán không cần thiết.

Dưới đây là bảng tóm tắt các phương thức chúng ta đã xem qua:

Phương thức	Mục đích	Cú pháp
useMemo	Ghi nhớ hóa phép toán đắt đỏ	useMemo(() => computation, dependencies)

Như với bất kỳ công cụ nào trong lập trình, hãy sử dụng useMemo một cách khôn ngoan. Nó rất tốt cho việc tối ưu hóa hiệu suất, nhưng sử dụng quá mức có thể làm cho mã của bạn trở nên phức tạp mà không có lợi ích显著. Như tôi luôn nói với học sinh của mình, "Với quyền lực lớn đi kèm với trách nhiệm lớn!"

Tiếp tục thực hành, tiếp tục xây dựng, và quan trọng nhất, tiếp tục vui vẻ với React. Trước khi bạn biết, bạn sẽ tạo ra các ứng dụng tuyệt vời làm cho cả những lập trình viên có kinh nghiệm phải nói "Wow!" Và nhớ rằng, nếu bạn bao giờ cảm thấy bế tắc, chỉ cần tưởng tượng bạn đang giải thích mã của mình cho một con vịt cao su. Nó có thể làm điều kỳ diệu, hãy tin tôi!

Chúc các bạn may mắn, các.master React tương lai!

Credits: Image by storyset