Angular Academy · Ders

OnPush Değişiklik Algılama

OnPush stratejisiyle denetimleri azaltın

OnPush Değişiklik Algılama, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Performans Sorunu

Varsayılan strateji, her tikte her bileşeni denetler. Büyük uygulamalarda bu işlem birikerek önemli bir maliyet oluşturur. OnPush, ilgili bir şey değişmediği sürece Angular'a bir bileşeni atlamasını söyler.

OnPush'u Etkinleştirme

Bileşen üzerindeki changeDetection seçeneğini ayarlayın.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user().name }}'
})
export class UserComponent {}

OnPush Ne Zaman Yeniden Denetler?

OnPush kullanan bir bileşen yalnızca şu durumlarda denetlenir: bir @Input başvurusu değiştiğinde, şablonundan bir olay tetiklendiğinde, async ile bağlanan bir gözlemlenebilir değer yayınladığında veya markForCheck() çağrıldığında.

Girdi Başvurusu Eşitliği

OnPush, girdi başvurularını Object.is ile karşılaştırır. Bir nesneyi yerinde değiştirmek yeniden denetimi tetiklemez; yeni bir başvuru geçirmeniz gerekir.

// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };

Değişmezlik Yardımcı Olur

OnPush, değişmez verilerle doğal biçimde birlikte çalışır. Başvuruların değişiklikleri güvenilir biçimde algılaması için verileri değiştirmek yerine her zaman yeni nesneler/diziler oluşturun.

this.items = [...this.items, newItem];

Olaylar Hâlâ Çalışır

Bileşenin kendi şablonundan gelen olaylar (tıklamalar, girdiler), bileşeni denetim için otomatik olarak işaretler; böylece yerel etkileşim ek kod olmadan çalışır.

<button (click)="count.set(count() + 1)">+</button>

async Boru Hattı

async borusu, gözlemlenebilir değeri yayın yaptığında markForCheck() çağırır; böylece OnPush akışlarla sorunsuz biçimde çalışır.

<p>{{ data$ | async }}</p>

markForCheck

Durumu normal tetikleyicilerin dışında güncellediğinizde, bileşeni (ve üst bileşenlerini) bir sonraki tik için zamanlamak üzere markForCheck() çağırın.

private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();

Sinyaller ve OnPush

Sinyaller OnPush ile bütünleşir: bir sinyalin şablonda okunması bir bağımlılık kaydeder ve sinyalin güncellenmesi bileşeni denetim için otomatik olarak işaretler; el ile çağrı yapmanız gerekmez.

count = signal(0);
increment() { this.count.update(c => c + 1); }

OnPush Yayılımı

İşaretlendiğinde, yolun denetlenmesi için bileşen ve köke kadar tüm üst bileşenleri işaretlenir. Alt bileşenler bunun altında normal biçimde denetlenir.

En İyi Uygulama

Yeni bileşenlerde OnPush'u varsayılan yapın. Sinyallerle veya değişmez girdilerle birlikte kullanıldığında gereksiz işlemleri büyük ölçüde azaltır.

Hızlı Kontrol

OnPush anlayışınızı sınayın.

Özet

ChangeDetectionStrategy.OnPush stratejisinin, bir girdi başvurusu değişmediği, bir şablon olayı tetiklenmediği, bir async borusu yayın yapmadığı veya markForCheck() çağrılmadığı sürece denetimleri atladığını öğrendiniz. Bu strateji, değişmez verilerle ve sinyallerle en iyi biçimde birlikte çalışır.

Sıkça Sorulan Sorular

“OnPush Değişiklik Algılama” dersi ücretsiz mi?

Evet — “OnPush Değişiklik Algılama” 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.

“OnPush Değişiklik Algılama” dersinde ne öğreneceğim?

OnPush stratejisiyle denetimleri azaltı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 2. dersidir.

“OnPush Değişiklik Algılama” 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

← Angular Academy Sayfasına Dön