Angular Academy · Ders

Saf ve Saf Olmayan Pipe'lar

Pipe değişiklik algılama davranışını anlayın.

Saf ve Saf Olmayan Pipe'lar, 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.

Varsayılan Olarak Saf Pipe'lar

Her pipe varsayılan olarak saftır. Saf bir pipe yalnızca girdi değeri veya bağımsız değişkenleri referans açısından değiştiğinde yeniden çalışır.

Saf Pipe'lar Neden Hızlıdır

Girdi referansı değişmediyse Angular değişiklik algılama sırasında saf bir pipe'ı çağırmaz. Bu, saf pipe'ları verimli kılar.

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

Referans Değişiklikleri ve Değer Değişiklikleri

Saf pipe'lar referans değişikliklerini algılar. Bir diziyi yerinde değiştirmek saf bir pipe'ı tetiklemez; çünkü dizi referansı aynı kalır.

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

Saf Olmayan Pipe Bildirme

Bir pipe'ı saf olmayan hâle getirmek için @Pipe dekoratöründe pure: false ayarlayın. Saf olmayan bir pipe, her değişiklik algılama döngüsünde çalışır.

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

Saf Olmayan Pipe'lar Ne Zaman Kullanılır

Dönüşüm, yerinde değiştirdiğiniz bir diziyi filtrelemek gibi değiştirilebilir verilere veya yeni bir referans oluşturmadan değişen değerlere bağlı olduğunda saf olmayan pipe'ları kullanın.

Saf Olmayan Pipe'ların Maliyeti

Saf olmayan pipe'lar her değişiklik algılama döngüsünde çok sık çalışır. İçlerindeki ağır mantık performansı olumsuz etkileyebilir; bu nedenle onları hafif tutun.

async Pipe Saf Değildir

Yerleşik async pipe'ı saf değildir. Bir Observable veya Promise'a abone olur ve yeni değerler geldikçe görünümü günceller.

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

// component
data$ = this.http.get("/api/data");

async Pipe Otomatik Olarak Abonelikten Çıkar

async pipe'ının önemli bir yararı, bileşen yok edildiğinde abonelikten otomatik olarak çıkması ve böylece bellek sızıntılarını önlemesidir.

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

Saf Pipe'larla Değişiklik Yapmaktan Kaçınma

Saf pipe'ların koleksiyonlarla çalışmasını sürdürmek için verileri değişmez kabul edin: mevcut dizileri ve nesneleri değiştirmek yerine yenilerini oluşturun.

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

Saf ve Saf Olmayan Pipe Arasında Seçim Yapma

Öngörülebilir ve hızlı davranış için saf pipe'ları tercih edin. Saf olmayan pipe'lara yalnızca değişikliklere gerçekten tepki vermeniz gerektiğinde başvurun. Çoğu zaman değişmez verilerle yeniden tasarlamak, saf olmayan pipe'lara olan ihtiyacı tamamen ortadan kaldırır.

Saf Olmayan Pipe İçin En İyi Uygulamalar

Saf olmayan bir pipe kullanmanız gerekiyorsa, girdiler değişmediğinde yeniden hesaplama yapmamak için sonuçları önbelleğe alın.

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

Hızlı Kontrol

Saf ve saf olmayan pipe'lar konusundaki anlayışınızı sınayın.

Özet

Saf pipe'lar yalnızca referans değişikliklerinde çalışır ve hızlıdır; saf olmayan pipe'lar (pure: false) her döngüde çalışır ve değiştirilebilir veriler için uygundur. async pipe'ı saf değildir ve abonelikten otomatik olarak çıkar.

Saf pipe'ların verimli kalması için değişmez verileri tercih edin.

Sıkça Sorulan Sorular

“Saf ve Saf Olmayan Pipe'lar” dersi ücretsiz mi?

Evet — “Saf ve Saf Olmayan Pipe'lar” 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.

“Saf ve Saf Olmayan Pipe'lar” dersinde ne öğreneceğim?

Pipe değişiklik algılama davranışı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 4. dersidir.

“Saf ve Saf Olmayan Pipe'lar” 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

Yerleşik Pipe'ları Kullanma
Pipe'ları Zincirleme ve Parametreleştirme
Özel Pipe'lar Oluşturma
Saf ve Saf Olmayan Pipe'lar

← Angular Academy Sayfasına Dön