ReactJS: Giới thiệu Lists và keys trong React Mới nhất 2022

Thủ Thuật về ReactJS: Giới thiệu Lists và keys trong React 2022

READ ALSO

Testnet là gì? Cách làm Testnet những dự án công trình bất Động sản

#### trong Excel là lỗi gì? Cách sửa lỗi #### nhanh gọn và đơn thuần và giản dị nhất

Khái niệm và cách thao tác của List (Danh sách) hay Array (Mảng) trong React tương đương với nhau. Thông thường ta sẽ dùng khái niệm Array nhiều hơn nữa List. Và việc khởi tạo và xử lý Array trong React tương tự như Javascript. Trong nội dung bài viết này, Group sẽ trình làng rõ ràng về Lists và key trong React nhé!

NỘI DUNGGiới thiệu về React listsREAD ALSOGiới thiệu React KeysTại sao ‘key’ lại quan trọng?Tổng kếtGiới thiệu về React lists

Cú pháp khai báo mảng rỗng

Chúng ta trọn vẹn có thể định nghĩa một mảng những tài liệu bao bởi dấu ngoặc vuông [].

Ví dụ, ta khai báo một array chứa title nội dung bài viết, sử dụng hàm map() trong Javascript để duyệt mảng và in ra số lượng component tương ứng với từng thành phần trong array.

function Post(props)
return (

Title: props.post.title

Author: props.post.author

);

class ListPost extends React.Component
constructor(props)
super(props);
this.state =
posts: [

postId: 1,
title: “Lifecycle của một component trong React”,
author: “QuiTran”,
,
postId: 2, title: “Bắt sự kiện trong React”, author: “QuiTran” ,

postId: 3,
title: “Rendering có điều kiện trong React”,
author: “QuiTran”,
,
],
;

render()
var listItems = this.state.posts.map((post) => );
return

listItems

;

Kết quả trả về là một component Post cho từng vòng lặp, ta có 3 component Post tương ứng với 3 thành phần trong mảng topic:

Kết quả hiển thị trên trình duyệt

Giới thiệu React Keys

Key giúp React xác lập thành phần nào của mảng bị thay đổi, thêm vào hay xóa đi. Các key được truyền vào những element trong một mảng để chúng có một định danh cố định và thắt chặt (stable identity).

Xét ví dụ sau:

function Developer(props)
return (

);

class ListDeveloper extends React.Component
constructor(props)
super(props);
this.state =
devs: [

name: “Danny”,
age: “23”,
skill: “coding php”,
,

name: “Vivian”,
age: “23”,
skill: “coding javascript”,
,

name: “Todd”,
age: “22”,
skill: “coding java “,
,
],
;

render()
var devList = this.state.devs.map((dev) => );
return

devList

;

Ta sẽ thấy kết quả hiển thị không còn lỗi gì, nhưng hãy bật F12 và mở tab console ta sẽ thấy có warning về key như sau:

Kết quả hiển thị trên trình duyệt

Warning lúc không còn “key”

Để khắc phục warning, ta thêm thuộc tính key vào trong component. Nếu không còn ID cố định và thắt chặt của những thành phần, ta trọn vẹn có thể sử dụng chỉ mục (index) của những thành phần trong mảng để làm một key.

render()
var devList = this.state.devs.map((dev, index) => );
return

devList

;

Nhưng React không khuyến khích sử dụng index để làm key cho element vì thứ tự những thành phần trọn vẹn có thể thay đổi bất thần. Điều này làm tác động đến hiệu suất và trọn vẹn có thể gây ra yếu tố với state của component. Nếu bạn sử dụng eslint, thì sẽ có được warning về quy tắc react/no-array-index-key, ta trọn vẹn có thể tìm hiểu thêm quy tắc tại đây.

Sử dụng index làm key là một anti-pattern trong React. Để tránh sử dụng index làm key, ta trọn vẹn có thể sử dụng bất kì thành phần nào trong mảng mà nó có mức giá trị duy nhất để làm key cho element. Trong ví dụ trên, ta trọn vẹn có thể thêm thuộc tính id vào để phân biệt:

class ListDeveloper extends React.Component
constructor(props)
super(props);
this.state =
devs: [

id: “1”,
name: “Danny”,
age: “23”,
skill: “coding php”,
,

id: “1”,
name: “Vivian”,
age: “23”,
skill: “coding javascript”,
,

id: “2”,
name: “Todd”,
age: “22”,
skill: “coding java “,
,
],
;

render()
var devList = this.state.devs.map((dev, index) => (

));
return

devList

;

Lưu ý: key là giá trị duy nhất, không được trùng nhau

Ví dụ, ta khai báo có 2 id trùng giá trị là “1”, thì ta sẽ nhận được một warning ở console như sau:

Warning khi bị trùng key

Tại sao ‘key’ lại quan trọng?

Xét ví dụ sau:

• first
• second

• first
• second
• third

Sau khi render một list với 2 thẻ