ReactJS - Keys: Mở Khóa Sức Mạnh Của Việc Render Danh Sách Hiệu Quả

Xin chào các siêu sao React tương lai! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những khái niệm quan trọng nhất trong React: Keys. Đừ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, giống như tôi đã làm cho hàng trăm sinh viên 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 bạn thích), và cùng nhau bắt đầu hành trình thú vị này nhé!

ReactJS - Keys

Hiểu Đúng Về Danh Sách và Keys

Danh Sách Là Gì Trong React?

Trước khi chúng ta nhảy vào keys, hãy cùng thảo luận về danh sách. Trong React, chúng ta thường cần hiển thị nhiều mục tương tự trên trang. Hãy tưởng tượng một danh sách công việc, giỏ hàng, hoặc thậm chí là danh sách phim yêu thích của bạn. Trong React, chúng ta sử dụng các mảng JavaScript để đại diện cho các danh sách này và render chúng trong các component.

Hãy cùng xem một ví dụ đơn giản:

function MovieList() {
const movies = ['Inception', 'Interstellar', 'The Dark Knight'];

return (
<ul>
{movies.map(movie => <li>{movie}</li>)}
</ul>
);
}

Trong đoạn mã này, chúng ta sử dụng hàm map để chuyển đổi mảng các tựa đề phim thành mảng các phần tử <li>. Rất thú vị, phải không?

Key Prop Ra Đời

Bây giờ, nếu bạn chạy đoạn mã này, bạn có thể nhận được một cảnh báo trong console:

Warning: Each child in a list should have a unique "key" prop.

Đây chính là nơi mà ngôi sao của chúng ta xuất hiện - key prop!

Key Là Gì?

Key là một thuộc tính đặc biệt có giá trị là chuỗi giúp React nhận biết các mục trong danh sách đã thay đổi, được thêm vào, hoặc bị xóa bỏ. Nó giống như việc bạn tặng cho mỗi mục trong danh sách một thẻ tên duy nhất.

Hãy sửa đổi ví dụ trước để bao gồm keys:

function MovieList() {
const movies = [
{ id: 1, title: 'Inception' },
{ id: 2, title: 'Interstellar' },
{ id: 3, title: 'The Dark Knight' }
];

return (
<ul>
{movies.map(movie => <li key={movie.id}>{movie.title}</li>)}
</ul>
);
}

Bây giờ, mỗi phần tử <li> có một key prop duy nhất. React sử dụng các keys này để hiệu quả cập nhật danh sách khi nó thay đổi.

Phép Đ魔法 Của Keys

Tại Sao Keys Quan Trọng?

Hãy tưởng tượng bạn là một giáo viên (như tôi!) với một lớp học đầy học sinh. Nếu bạn muốn nhanh chóng điểm danh, việc mỗi học sinh có một mã số duy nhất sẽ dễ dàng hơn nhiều, phải không? Đó chính xác là điều keys làm cho React.

Keys giúp React:

Nhận biết các mục đã thay đổi, được thêm vào, hoặc bị xóa bỏ
Giữ lại trạng thái component giữa các lần re-render
Cải thiện hiệu suất bằng cách giảm thiểu thao tác DOM

Chọn Key Phù Hợp

Bây giờ, bạn có thể tự hỏi, "Tôi nên sử dụng gì làm key?" Câu hỏi tuyệt vời! Hãy cùng phân tích:

Sử dụng ID duy nhất và ổn định: Nếu dữ liệu của bạn đến từ cơ sở dữ liệu, hãy sử dụng ID của mục.

<li key={item.id}>{item.name}</li>

Sử dụng chỉ số làm key như phương án cuối cùng: Nếu bạn không có ID ổn định, bạn có thể sử dụng chỉ số trong mảng. Tuy nhiên, điều này có thể dẫn đến vấn đề nếu danh sách của bạn có thể thay đổi thứ tự.

{items.map((item, index) => <li key={index}>{item.name}</li>)}

Tạo key duy nhất: Nếu bạn đang tạo mục trên không, bạn có thể sử dụng một gói như uuid để tạo key duy nhất.

import { v4 as uuidv4 } from 'uuid';

{items.map(item => <li key={uuidv4()}>{item.name}</li>)}

Key và Index: Xem Xét Chi Tiết

Bây giờ chúng ta đã hiểu các nguyên tắc cơ bản, hãy cùng xem xét sâu hơn về việc sử dụng chỉ số làm key.

Khi Nào Nên Sử Dụng Index Làm Key

Sử dụng chỉ số làm key rất hấp dẫn vì nó dễ dàng và luôn có sẵn. Tuy nhiên, nó thường không được khuyến khích unless:

Danh sách là tĩnh và không thay đổi
Các mục trong danh sách không có ID ổn định
Danh sách sẽ không bao giờ được sắp xếp lại hoặc lọc

Dưới đây là một ví dụ nơi sử dụng chỉ số làm key có thể chấp nhận được:

function StaticList() {
const items = ['Apple', 'Banana', 'Cherry'];

return (
<ul>
{items.map((item, index) => <li key={index}>{item}</li>)}
</ul>
);
}

Hậu Quả Của Việc Sử Dụng Index Làm Key

Hãy xem xét một ví dụ động hơn để hiểu tại sao sử dụng chỉ số làm key có thể gây ra vấn đề:

function DynamicList() {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

const addItem = () => {
setItems(['New Item', ...items]);
};

return (
<>
<button onClick={addItem}>Add Item</button>
<ul>
{items.map((item, index) => (
<li key={index}>
{item}
<input type="text" />
</li>
))}
</ul>
</>
);
}

Trong ví dụ này, nếu bạn thêm một mục mới và sau đó gõ gì đó trong một trong các trường nhập liệu, bạn sẽ nhận thấy rằng các giá trị nhập liệu bị trộn lẫn. Điều này là vì React sử dụng chỉ số làm key, và khi chúng ta thêm một mục mới ở đầu, tất cả các chỉ số bị dịch chuyển.

Cách Tốt Hơn

Để sửa lỗi này, chúng ta nên sử dụng một nhận biết duy nhất và ổn định cho mỗi mục:

function DynamicList() {
const [items, setItems] = useState([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
]);

const addItem = () => {
const newItem = { id: Date.now(), text: 'New Item' };
setItems([newItem, ...items]);
};

return (
<>
<button onClick={addItem}>Add Item</button>
<ul>
{items.map(item => (
<li key={item.id}>
{item.text}
<input type="text" />
</li>
))}
</ul>
</>
);
}

Bây giờ, ngay cả khi chúng ta thêm mục mới hoặc thay đổi thứ tự danh sách, React vẫn có thể theo dõi từng mục chính xác.

Kết Luận

Chúc mừng! Bạn đã mở khóa sức mạnh của keys trong React. Nhớ rằng, keys giống như thẻ tên cho các mục trong danh sách - chúng giúp React theo dõi điều gì đã thay đổi, đặc biệt khi mọi thứ bắt đầu di chuyển.

Dưới đây là tóm tắt nhanh những gì chúng ta đã học:

Khái niệm	Mô tả
Keys	Thuộc tính chuỗi đặc biệt cho các mục trong danh sách React
Mục đích	Giúp React nhận biết thay đổi trong danh sách hiệu quả
Thực hành tốt	Sử dụng nhận biết duy nhất và ổn định làm keys
Sử dụng chỉ số làm key	Chỉ sử dụng cho danh sách tĩnh, không thay đổi
Lợi ích	Cải thiện hiệu suất và duy trì trạng thái component

Tiếp tục thực hành với keys, và sớm bạn sẽ trở thành một chuyên gia tạo ra các ứng dụng React động và hiệu quả! Chúc may mắn, và hãy nhớ - trong thế giới của React, mỗi mục đều xứng đáng có một key duy nhất!

Credits: Image by storyset