Senior - Tại sao chúng ta cần 1 thuộc tính “key”. Cho một ví dụ về 1 key tồi gây ra lỗi.

{{FormatNumbertoThousand(model.total_like)}} lượt thích
449 lượt xem
Reactjs

Người phỏng vấn muốn nghe một vài thông tin về cách React hoạt động nội bộ.

Câu trả lời dựa vào Tài liệu tiến trình React reconciliation chính thức.

Các thuật toán Diffing cổ điển với độ phức tạp thời gian O(n³) có thể được dùng để tạo 1 cây các phần tử React, có nghĩa là để hiển thị 1000 phần tử sẽ cần 1 tỷ phép so sánh.

Thay vào đó, React thực hiện 1 thuật toán heuristic O(n) với giả định rằng các nhà phát triển có thể gợi ý tại các phần tử con có thể được stable qua các hiển thị khác nhau với thuộc tính “Key”.

Một key tồi thì sao? Một “index” sẽ rất là tệ nếu các bạn quyết định dùng để thực hiện tính năng xóa 1 phần tử con. Check out this demo. Thử gõ bất kỳ vào input thứ 2 rồi sau đó xóa input thứ 1, bạn vẫn sẽ thấy giá trị bạn mới gõ nằm ở input thứ 2, tại sao lại như vậy?

Bởi vì các key của bạn không ổn định. Sau khi xóa, input thứ 3 có key bằng 3, thì bây giờ có key bằng 2, nó không đúng với phần tử của React. Và nó sẽ match nó tới phần tử DOM sai, là phần tử DOM có key bằng 2 trước đó ( phần tử DOM có giá trị mà chúng ta đã gõ ở input thứ 2).

 

Một số chủ đề thú vị có thể bạn thích:

- Giới thiệu useState và useEffect-useRef trong React Hooks

{{login.error}}