Sau khi xem video thì mình hiểu như này: - key cần một value cố định theo thời gian. -> index của phần tử có thể thay đổi theo thời gian nên không sử dụng làm key được. VD: element X ban đầu có key là 0, nhưng sau khi add thêm 1 element mới vào đầu danh sách thì key của element X lại bị đổi thành 1. Nên thuật toán difference của react không thể detect được.
hiểu đơn giản là key thằng React nó dùng. để tránh bugs thì đừng đụng vào nó, vì dùng index sẽ dính chưởng khi thác tác với data, đặc biệt là array => méo care vào tạo key # index để tránh bugs, có bạn nào hay code như vậy ko 😁
xin mở rộng vấn đề một tý là không riêng gì react mà bất cứ ngôn ngữ nào liên quan tới việc xóa sửa phần tử trong mãng có xét đến thứ tự, đều gặp vấn đề này. Nghĩa là xóa hay thêm 1 phần tử trong mảng thì dùng định danh của phần tử đó chứ không nên dùng thứ tự của phần tử trong mảng để xử lý. * Định danh của phần tử chình là property của phần tử đó như video trên là todo.id ( gần giống khóa chính trong bảng )
Vấn đề lớn nhất là khi key thay đổi thì component bị đập đi xây lại hoàn toàn điều này thì k hề tốt về mặt hiệu năng, đặc biệt trên react native. Còn bug trên thì vẫn có nhiều cách khác nhau để fix
Những ui nào có data thì key nên né index thôi nhỉ? Ví dụ e cần 1 array fake để làm skeleton cho 1 list thì e dùng index (thứ tự) vẫn bình thường k ảnh hưởng gì. Ví dụ Arrary.from(Array.keys(10)).map( e => ) (e ở đây cũng gần như là index: 0,1,2,3,...)
hiểu nôm na là key để thằng react nó phân biệt các list data có sự unique để xử lý chuẩn cho từng item trong list data đó, nếu đặt key = index thì chả khác nào khi thay đổi data thì lại gán index của item trong list data đó cho item khác.
Tuỳ trường hợp thôi mấy anh bạn à? Thuần tuý render list data ra thì dùng key làm index để bypass warning cho nhanh gọn, và code nó chung 1 format copy paste nó tiện khỏi sửa, còn khi nào mà dùng để thêm sửa xoá thì mới quan tâm đến cái chuyện key = id. Làm việc linh hoạt chứ cứng ngắc làm gì, làm lâu am hiểu về cái thứ mình sử dụng thì mấy quy tắc là vô nghĩa, 1 thằng senior JS nó làm ra product còn ít bug hơn cả thằng gà code = TS
bạn so sánh vậy khá nghiêng về một phía, việc code JS ngon không bug không ai phủ nhận cả nhưng code TS các props và state được định nghĩa type rõ ràng giúp cho việc maintain dễ dàng hơn, và debug nhanh hơn
hi anh , em không biết anh sống ở trong nước hay nước ngoài, nhưng anh có thể nói chuyện bình thường được không ạ . Sử dụng index như là một cái "kì" ??? Mong anh giữ gìn sự trong sáng cho cả tiếng anh và tiếng việt ạ !!
mình nên dùng id của chính dữ liệu đang render. Lúc thêm mới dữ liệu vào danh sách thì có thể thêm field id bằng hook useId() hoặc cài thêm thư viện bên ngoài như www.npmjs.com/package/uuid
@@holetex lúc trc e cũng dùng cách như này để làm cái toast nhưng bị cái issue lúc unshift vào đầu thì tất cả toast sẽ đều bật animation thay vì chỉ mỗi cái đầu có animation thôi
Tóm tắt video Thứ nhất về vấn đề hiệu xuất: -Trường hợp sử dụng Unique as Key: cả ngay khi thêm vào đầu và cuối Vitrual DOM sẽ so sánh lúc trước khi cập nhập và sau khi cập nhập, nhận thấy Key là unique nên các element không bị thay đổi => React chỉ cập nhập thành phần được thêm vào cuối( đầu). -Trường hợp sử dụng Index as Key: thêm vào đầu , bây giờ key của các element khác đều thay đổi, điều này khiến React phải cập nhập lại tất cả một lần nữa thay vì chỉ cần cập nhập elem mới được thêm vào Thứ hai về vấn đề ánh xạ , sắp xếp , xóa...: -Trường hợp sử dụng index á key: thao tác add delete làm toàn bộ danh sách bị cập nhập lại , một số thao tác dựa vào key sẽ bị sai lệch -Trường hợp sử dụng unique id as key: thao tác add delet... danh sách chỉ thay đổi thành phần bị tác động demo các trường hợp sorrt delete với index và unique codesandbox.io/s/loving-wilbur-enj6v?from-embed ? Vậy khi nào được sử dụng index: - Khi data là tĩnh - Không thực hiện thao tác thêm xóa sửa sắp xếp,.. ? Vậy khi nào sử dụng unique: - Bất cứ khi nào dùng cũng dc :v miễn là data có unique ( quên index as key đi, auto unique :))
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Sau khi xem video thì mình hiểu như này:
- key cần một value cố định theo thời gian.
-> index của phần tử có thể thay đổi theo thời gian nên không sử dụng làm key được.
VD: element X ban đầu có key là 0, nhưng sau khi add thêm 1 element mới vào đầu danh sách thì key của element X lại bị đổi thành 1. Nên thuật toán difference của react không thể detect được.
hiểu đơn giản là key thằng React nó dùng. để tránh bugs thì đừng đụng vào nó, vì dùng index sẽ dính chưởng khi thác tác với data, đặc biệt là array => méo care vào tạo key # index để tránh bugs, có bạn nào hay code như vậy ko 😁
Ụa a đi cmt dạo à :v
content này mới thấy ở cha gì chia sẻ , dù sao cũng cảm ơn anh , để mai lên cty refactor lại đống map :)
Wow, hay quá, trước giờ cứ thấy mọi người bảo là không nên dùng, giờ mới biết tại sao
xin mở rộng vấn đề một tý là không riêng gì react mà bất cứ ngôn ngữ nào liên quan tới việc xóa sửa phần tử trong mãng có xét đến thứ tự, đều gặp vấn đề này.
Nghĩa là xóa hay thêm 1 phần tử trong mảng thì dùng định danh của phần tử đó chứ không nên dùng thứ tự của phần tử trong mảng để xử lý.
* Định danh của phần tử chình là property của phần tử đó như video trên là todo.id ( gần giống khóa chính trong bảng )
Hay cần thêm những vid như này share cho ae biết
Ngày xưa đi pv ngta cũng có hỏi em vụ đặt key bằng index như này, và trong project cũng gặp lỗi tương tự ạ. Em cám ơn anh
quá hay anh ơi
anh Tùng làm thêm video về redux saga tutorial nha anh, cảm ơn anh nhiều, a dạy rất dễ hiểu lun á :D
Cảm ơn em zai 😄
@@holetex neu duoc a làm thêm về redux saga nha a 😍
@@holetex làm về chủ để redux saga, react query view cao lắm anh 😁
A dạy về redux obserable đii ạ
Tốt nhất là vẫn nên định danh , lỡ sau này có update thêm feature hay scale lại thì cũng k gặp nhưng lỗi ngớ ngẩn
Vấn đề lớn nhất là khi key thay đổi thì component bị đập đi xây lại hoàn toàn điều này thì k hề tốt về mặt hiệu năng, đặc biệt trên react native. Còn bug trên thì vẫn có nhiều cách khác nhau để fix
Cảm ơn anh nhiều, em cũng dùng index làm key bấy lâu nay
Cảm ơn em đã ủng hộ anh!
Nếu init 1 uuid để set key thì giải pháp đó có ổn ko ta ?
hay ạ, em cảm ơn, mấy nay cứ auto dùng index
Cảm ơn em nhé
Good job bro nhé kaka
Cảm ơn bro nhiều nhé 😄
cho mình hỏi tại sao completed bị lỗi nhưng name hiển thị ko bị khi dùng index làm key?
In The setup what soft is that the little one
e cx đang bị lỗi này bảo sao. May quá gặp vid cuả a
Những ui nào có data thì key nên né index thôi nhỉ?
Ví dụ e cần 1 array fake để làm skeleton cho 1 list thì e dùng index (thứ tự) vẫn bình thường k ảnh hưởng gì.
Ví dụ Arrary.from(Array.keys(10)).map( e => )
(e ở đây cũng gần như là index: 0,1,2,3,...)
yes em, chỉ lưu ý khi sử dụng với dữ liệu thật thôi em
hiểu nôm na là key để thằng react nó phân biệt các list data có sự unique để xử lý chuẩn cho từng item trong list data đó, nếu đặt key = index thì chả khác nào khi thay đổi data thì lại gán index của item trong list data đó cho item khác.
React 18 có dùng được rekit studio không anh? Hay giờ phát triển dùng react có công cụ nào xây dựng khung web ổn không nhỉ?
Anh vừa khai sáng em ^^
Anh dùng font chữ gì đấy anh
anh có thể làm thêm về react native hông ạ
Nếu là data tĩnh dùng index thì ok phải không, còn nếu data update thì không dùng được phải không bạn
đúng r bạn
hay
many thanks
Tuỳ trường hợp thôi mấy anh bạn à? Thuần tuý render list data ra thì dùng key làm index để bypass warning cho nhanh gọn, và code nó chung 1 format copy paste nó tiện khỏi sửa, còn khi nào mà dùng để thêm sửa xoá thì mới quan tâm đến cái chuyện key = id.
Làm việc linh hoạt chứ cứng ngắc làm gì, làm lâu am hiểu về cái thứ mình sử dụng thì mấy quy tắc là vô nghĩa, 1 thằng senior JS nó làm ra product còn ít bug hơn cả thằng gà code = TS
bạn so sánh vậy khá nghiêng về một phía, việc code JS ngon không bug không ai phủ nhận cả nhưng code TS các props và state được định nghĩa type rõ ràng giúp cho việc maintain dễ dàng hơn, và debug nhanh hơn
Dùng linh hoạt thì vẫn được thôi.
hi anh , em không biết anh sống ở trong nước hay nước ngoài, nhưng anh có thể nói chuyện bình thường được không ạ . Sử dụng index như là một cái "kì" ??? Mong anh giữ gìn sự trong sáng cho cả tiếng anh và tiếng việt ạ !!
Không dùng index thì thường người ta dùng gì mọi người nhỉ
mình nên dùng id của chính dữ liệu đang render. Lúc thêm mới dữ liệu vào danh sách thì có thể thêm field id bằng hook useId() hoặc cài thêm thư viện bên ngoài như www.npmjs.com/package/uuid
@@holetex lúc trc e cũng dùng cách như này để làm cái toast nhưng bị cái issue lúc unshift vào đầu thì tất cả toast sẽ đều bật animation thay vì chỉ mỗi cái đầu có animation thôi
thường thì dùng userId của API luôn . Còn không thì dùng ID
Mình cảm mọi người, cảm ơn HoleTex
vì k nên dùng react
Tóm tắt video
Thứ nhất về vấn đề hiệu xuất:
-Trường hợp sử dụng Unique as Key: cả ngay khi thêm vào đầu và cuối Vitrual DOM sẽ so sánh lúc trước khi cập nhập và sau khi cập nhập, nhận thấy Key là unique nên các element không bị thay đổi => React chỉ cập nhập thành phần được thêm vào cuối( đầu).
-Trường hợp sử dụng Index as Key: thêm vào đầu , bây giờ key của các element khác đều thay đổi, điều này khiến React phải cập nhập lại tất cả một lần nữa thay vì chỉ cần cập nhập elem mới được thêm vào
Thứ hai về vấn đề ánh xạ , sắp xếp , xóa...:
-Trường hợp sử dụng index á key: thao tác add delete làm toàn bộ danh sách bị cập nhập lại , một số thao tác dựa vào key sẽ bị sai lệch
-Trường hợp sử dụng unique id as key: thao tác add delet... danh sách chỉ thay đổi thành phần bị tác động
demo các trường hợp sorrt delete với index và unique codesandbox.io/s/loving-wilbur-enj6v?from-embed
? Vậy khi nào được sử dụng index:
- Khi data là tĩnh
- Không thực hiện thao tác thêm xóa sửa sắp xếp,..
? Vậy khi nào sử dụng unique:
- Bất cứ khi nào dùng cũng dc :v miễn là data có unique ( quên index as key đi, auto unique :))
như thể để key = index để khỏi warning thôi, chứ cũng không khác mấy so với ko dùng key nhỉ.