0Pricing
Angular Academy · Ders

Listeleri ve Görüntülemeyi İyileştirme

İzleme kullanarak büyük listeleri hızlandırın

Listeleri ve Görüntülemeyi İyileştirme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Liste Görüntüleme Neden Önemlidir?

Listeler, en yaygın performans darboğazıdır. Her değişiklikte tüm listeyi yeniden oluşturmak işlemleri boşa harcar ve DOM durumunu sıfırlar. Angular, verimli görüntüleme için araçlar sunar.

@for Bloğu

Yerleşik denetim akışındaki @for, Angular'ın her öğeyi güncellemeler arasında tanımlayabilmesi için bir track ifadesi gerektirir.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

track Neden Gereklidir?

Kararlı bir kimlik olmadan Angular hangi öğelerin taşındığını, eklendiğini veya kaldırıldığını belirleyemez. track, oluşturulan her düğümü verilerine eşleyerek DOM'u yeniden oluşturmak yerine yeniden kullanmasını sağlar.

Kimliğe Göre İzleme

Kimlik gibi benzersiz ve kararlı bir anahtar kullanın. Yeniden sıralanan listelerde track $index kullanmaktan kaçının; dizin değişiklikleri gereksiz DOM hareketliliğine neden olur.

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

Uygun Durumlarda track $index

Öğelerin benzersiz bir kimliği yoksa ve hiçbir zaman yeniden sıralanmıyorsa (yalnızca sona eklenen günlükler gibi), track $index kabul edilebilir.

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

Eski trackBy

Daha eski *ngFor ile kararlı bir anahtar döndüren bir trackBy işlevi sağlarsınız.

trackById(index: number, item: Item) {
  return item.id;
}

Şablonda trackBy

İşleve *ngFor mikro söz dizimi içinde başvurun.

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

Boş ve Yükleniyor Durumları

@for, koleksiyon boş olduğunda kullanılmak üzere bir @empty bloğunu destekler; böylece ek *ngIf denetimlerine gerek kalmaz.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

Bağlamalarda İşlev Çağrılarından Kaçının

Şablonlardaki işlevler her denetimde çalışır. @for gövdelerinde yöntem çağırmak yerine değerleri önceden sinyallere veya önbelleğe alınmış alanlara hesaplayın.

OnPush + Değişmez Listeler

OnPush'u her değişiklikte yeni dizi başvuruları oluşturmayla birleştirin. Uygun track kullanıldığında Angular yalnızca gerçekten değişen satırları günceller.

this.items.update(list => [...list, newItem]);

Sanal Kaydırma

Çok büyük listelerde, veri boyutundan bağımsız olarak DOM'u küçük tutmak için yalnızca görünür satırları CDK cdk-virtual-scroll-viewport ile görüntüleyin.

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

Hızlı Kontrol

Liste iyileştirmesi anlayışınızı sınayın.

Özet

Kararlı anahtarlar, bir @empty bloğu, OnPush ile değişmez güncellemeler ve çok büyük koleksiyonlar için sanal kaydırma kullanarak listeleri @for ... track (veya eski trackBy) ile iyileştirmeyi öğrendiniz.

Sıkça Sorulan Sorular

“Listeleri ve Görüntülemeyi İyileştirme” dersi ücretsiz mi?

Evet — “Listeleri ve Görüntülemeyi İyileştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Listeleri ve Görüntülemeyi İyileştirme” dersinde ne öğreneceğim?

İzleme kullanarak büyük listeleri hızlandırın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Listeleri ve Görüntülemeyi İyileştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Değişiklik Algılama Nasıl Çalışır
  2. OnPush Değişiklik Algılama
  3. Zoneless Angular
  4. Listeleri ve Görüntülemeyi İyileştirme
← Angular Academy Sayfasına Dön