Keys là một định danh duy nhất. Trong React, nó được sử dụng để xác định những mục nào đã thay đổi, cập nhật hoặc xóa khỏi Danh sách. Nó hữu ích khi chúng tôi tạo động các component hoặc khi người dùng thay đổi danh sách. Nó cũng giúp xác định component nào trong bộ sưu tập cần được kết xuất lại thay vì mỗi lần kết xuất lại toàn bộ tập hợp các component.
Các bài viết liên quan:
Các keys nên được cung cấp bên trong mảng để cung cấp cho các phần tử một danh tính ổn định. Cách tốt nhất để chọn một keys dưới dạng một chuỗi xác định duy nhất các mục trong danh sách. Nó có thể được hiểu với ví dụ dưới đây.
Ví dụ
const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ];
const updatedLists = stringLists.map((strList)=>{
<li key={strList.id}> {strList} </li>;
}); Nếu không có ID ổn định cho các mục được hiển thị, bạn có thể gán chỉ mục mục làm keys cho danh sách. Nó có thể được hiển thị trong ví dụ dưới đây.
Ví dụ
const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ];
const updatedLists = stringLists.map((strList, index)=>{
<li key={index}> {strList} </li>;
});
Lưu ý: Không nên sử dụng chỉ mục cho các keys nếu thứ tự của mặt hàng có thể thay đổi trong tương lai. Nó tạo ra sự nhầm lẫn cho nhà phát triển và có thể gây ra sự cố với trạng thái component.
Sử dụng các keys với component
Hãy xem xét bạn đã tạo một component riêng biệt cho ListItem và trích xuất List Item từ component đó. Trong trường hợp này, bạn phải gán keys cho các phần tử <ListItem /> trong mảng, không phải cho các phần tử <li> trong chính ListItem. Để tránh sai lầm, bạn phải nhớ rằng các phím chỉ có ý nghĩa trong bối cảnh của mảng xung quanh. Vì vậy, bất kỳ thứ gì bạn đang trả về từ hàm map () đều nên được gán một keys.
Ví dụ: Sử dụng keys không chính xác
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
const item = props.item;
return (
// Wrong! No need to specify the key here.
<li key={item.toString()}>
{item}
</li>
);
}
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((strLists) =>
// The key should have been specified here.
<ListItem item={strLists} />
);
return (
<div>
<h2>Incorrect Key Usage Example</h2>
<ol>{listItems}</ol>
</div>
);
}
const myLists = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'];
ReactDOM.render(
<NameList myLists={myLists}/>,
document.getElementById('app')
);
export default App;
Trong ví dụ đã cho, danh sách được hiển thị thành công. Nhưng không phải là một thực tiễn tốt mà chúng tôi đã không chỉ định một keys cho trình vòng lặp bản đồ ().
Ví dụ: Cách sử dụng chính xác
Để sửa ví dụ trên, chúng ta phải gán keys cho trình lặp map ().
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
const item = props.item;
return (
// No need to specify the key here.
<li> {item} </li>
);
}
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((strLists) =>
// The key should have been specified here.
<ListItem key={myLists.toString()} item={strLists} />
);
return (
<div>
<h2>Correct Key Usage Example</h2>
<ol>{listItems}</ol>
</div>
);
}
const myLists = ['item1', 'item2', 'item3', 'item4', 'item5'];
ReactDOM.render(
<NameList myLists={myLists}/>,
document.getElementById('app')
);
export default App; Tính duy nhất của keys giữa các anh chị em
Chúng tôi đã thảo luận rằng việc gán keys trong mảng phải là duy nhất giữa các anh chị em của chúng. Tuy nhiên, nó không có nghĩa là các keys phải là duy nhất trên toàn cầu. Chúng ta có thể sử dụng cùng một bộ keys để tạo ra hai mảng khác nhau. Nó có thể được hiểu trong ví dụ dưới đây.
Ví dụ
import React from 'react';
import ReactDOM from 'react-dom';
function MenuBlog(props) {
const titlebar = (
<ol>
{props.data.map((show) =>
<li key={show.id}>
{show.title}
</li>
)}
</ol>
);
const content = props.data.map((show) =>
<div key={show.id}>
<h3>{show.title}: {show.content}</h3>
</div>
);
return (
<div>
{titlebar}
<hr />
{content}
</div>
);
}
const data = [
{id: 1, title: 'First', content: 'Welcome to React!!'},
{id: 2, title: 'Second', content: 'It is the best ReactJS Tutorial!!'},
{id: 3, title: 'Third', content: 'Here, you can learn all the ReactJS topics!!'}
];
ReactDOM.render(
<MenuBlog data={data} />,
document.getElementById('app')
);
export default App;
