key özniteliği
- React kursu
- Başlangıç
- Ders 28/84
- 4 dk
Her liste öğesine benzersiz bir key verilmesinin nedenini öğrenirsin.
key özniteliği
React, listeden hangi öğeyi ekleyip çıkardığını anlamak için her düğüme bir key vermeni ister. key, o öğenin benzersiz kimliğidir.
key'i doğrudan <li> üzerine yazarsın: <li key={item.id}>. React key'lere bakarak hangi li'nin değiştiğini bulur ve yalnızca onu günceller.
key'ler kardeşler arasında benzersiz olmalı; liste boyunca değil. Aynı key iki kez kullanılmaz.
Kararlı key seçimi
En iyi key, veride zaten var olan benzersiz bir alandır: id, e-posta, kullanıcı adı. Böyle bir alan yoksa veriye id ekle.
key'i Math.random() gibi rastgele üretmek yanlıştır: her render'da yeni key oluşur, React her şeyi yeniden çizer.
Sayma sayıları (0,1,2) yalnızca liste sonuna eklenen ve hiç çıkarılmayan durumlarda işe yarar.
Uygulama ListWithKeys bileşeni
Aşağıdaki iskeleti tamamla. ListWithKeys bileşeni yaz; items dizisinde her öğenin id ve name alanı var. .map() ile her öğeyi <li key={item.id}>{item.name}</li> yap. Dışa aktar.
Başlangıç kodu
// ListWithKeys bileşenini buraya tanımlaÖrnek çözüm
function ListWithKeys() {
const items = [{ id: 1, name: "Ayşe" }, { id: 2, name: "Mehmet" }];
return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}
export default ListWithKeys;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 key özniteliği: eksik parçayı tamamla
<li key={____}>{item.name}</li><li key={item.id}>{item.name}</li>Açıklama: item.id kararlı ve benzersizdir.
2 key olarak dizi indeksi ne zaman sorun yaratır?
React wants stable identity; the index is not stable.- Hiç sorun yaratmaz
- Sadece büyük listelerde
- Öğeler eklendiğinde veya çıkarıldığında Doğru cevap
- Yalnızca metinlerde
Açıklama: Liste ortasına ekleme/çıkarma yapılırsa indeks kayar, React yanlış düğümü günceller.
3 key özniteliği: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
id alanı |
En iyi key |
Math.random() |
Yanlış key |
indeks |
Sadece append listeler |
aynı key iki kez |
Yasak |