Angular Academy · Ders

Değişiklik Algılama Nasıl Çalışır

Angular'ın değişiklik algılama döngüsünü anlayın

Değişiklik Algılama Nasıl Çalışır, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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.

Değişiklik Algılama Nedir?

Değişiklik algılama, Angular'ın DOM'u bileşen durumunuzla eşitlenmiş tutmak için kullandığı işlemdir. Veriler değiştiğinde Angular, bağlamaları yeniden değerlendirir ve yalnızca farklı olanları günceller.

Algılama Döngüsü

Angular, her bileşenin bağlamalarını denetleyerek bileşen ağacını kökten aşağı doğru dolaşır. Bu yukarıdan aşağıya geçiş, bir değişiklik algılama döngüsüdür (tick).

Bir Tick'i Ne Tetikler?

Varsayılan olarak Angular, eşzamansız olaylardan sonra değişiklik algılamayı çalıştırır: DOM olayları, zamanlayıcılar ve HTTP yanıtları. Bu süreç Zone.js tarafından koordine edilir.

Zone.js

Zone.js, Angular'ın bir işlemin ne zaman tamamlandığını ve bir tick gerekip gerekmediğini bilmesi için eşzamansız API'lere (setTimeout, addEventListener, Promise, XHR) yama uygular.

// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.

NgZone

NgZone, Zone.js'i Angular için sarar. Yoğun döngülerde değişiklik algılamayı tetiklememek için kodu Angular bölgesinin dışında çalıştırabilirsiniz.

private zone = inject(NgZone);

this.zone.runOutsideAngular(() => {
  // heavy work, no CD triggered
});

Bölgeye Yeniden Girme

Kullanıcı arayüzünü bölgenin dışından güncellemek için run ile bölgeye yeniden girin; böylece Angular bir tick planlar.

this.zone.run(() => {
  this.ready = true;
});

Varsayılan Strateji

Varsayılan stratejide her bileşen her tick'te denetlenir. Bu basit ve güvenlidir; ancak büyük ağaçlarda gereksiz işlem yükü oluşturabilir.

Bağlama Karşılaştırması

Angular, her bağlamanın geçerli değerini önceki değeriyle Object.is kullanarak karşılaştırır. Değer değişmemişse DOM'a dokunulmaz.

İfadeler Saf Olmalıdır

Şablon ifadeleri her denetimde çalıştırılır; bu nedenle hızlı olmalı ve yan etki içermemelidir. Pahalı işlevleri doğrudan şablonlarda çağırmaktan kaçının.

<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>

ExpressionChangedAfterChecked

Geliştirme modunda Angular ikinci bir doğrulama geçişi çalıştırır. Geçişler arasında bir değer değişirse, durumun görüntüleme sırasında değiştirildiğini belirten ExpressionChangedAfterItHasBeenCheckedError hatasını alırsınız.

Elle Denetim

Algılamayı denetlemek için ChangeDetectorRef enjekte edin: markForCheck(), detectChanges() ve detach() ayrıntılı denetim sağlar.

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

Hızlı Kontrol

Değişiklik algılama hakkındaki anlayışınızı sınayın.

Özet

Değişiklik algılamanın, durumu DOM ile eşitleyen yukarıdan aşağıya bir ağaç geçişi olduğunu; Zone.js/NgZone aracılığıyla eşzamansız olaylar tarafından tetiklendiğini ve bağlamaları Object.is ile karşılaştırdığını öğrendiniz. ChangeDetectorRef elle denetim sağlar.

Sıkça Sorulan Sorular

“Değişiklik Algılama Nasıl Çalışır” dersi ücretsiz mi?

Evet — “Değişiklik Algılama Nasıl Çalışır” 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.

“Değişiklik Algılama Nasıl Çalışır” dersinde ne öğreneceğim?

Angular'ın değişiklik algılama döngüsünü anlayı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 1. dersidir.

“Değişiklik Algılama Nasıl Çalışır” 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