Angular Academy · Ders

Efekt Temizleme ve Yaşam Döngüsü

Efektlerin içinde kaynakları temizleyin.

Efekt Temizleme ve Yaşam Döngüsü, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

Temizleme Neden Önemlidir

Bir effect kaynakları başlatabilir: zamanlayıcılar, abonelikler ve olay dinleyicileri. Effect her yeniden çalıştığında eski kaynak önce kaldırılmalıdır; aksi hâlde zamanlayıcıları ve dinleyicileri sızdırırsınız. Angular bunun için onCleanup kancasını sağlar.

onCleanup Geri Çağırma İşlevi

Effect işlevi bir onCleanup işlevi alır. Bununla bir kaldırma geri çağırma işlevi kaydedin; Angular bu işlevi bir sonraki çalıştırmadan önce ve yok etme sırasında çağırır.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

Temizleme Her Yeniden Çalıştırmadan Önce Gerçekleşir

Bir bağımlılık değiştiğinde Angular önce kaydedilen temizleme işlevini çağırır, ardından effect gövdesini yeniden çalıştırır. Böylece aynı anda yalnızca bir etkin kaynak bulunması garanti edilir.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Olay Dinleyicilerini Temizleme

Bir effect'e eklenen DOM dinleyicileri, yinelenen işleyicileri ve sızıntıları önlemek için temizleme sırasında kaldırılmalıdır.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Aboneliklerle Temizleme

Bir effect bir Observable'a abone olursa temizleme sırasında abonelikten çıkın. (Çoğu durumda başka araçlar kullanırsınız; ancak bu örnek yaklaşımı gösterir.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Yok Etme Sırasında Temizleme

Effect'in sahibi olan bileşen yok edildiğinde Angular son temizlemeyi otomatik olarak çalıştırır ve ardından effect'i yok eder. Sızan zamanlayıcı kalmaz.

Sıra: Temizleme, Ardından Gövde

Bir effect ilk kez çalıştığında temizlenecek bir şey yoktur. İkinci çalıştırmadan itibaren sıra her zaman şöyledir: temizleme -> gövde.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Temizleme Olmadan Ağır İşlerden Kaçınma

Bir effect'te başlatılan uzun ömürlü her kaynağın buna karşılık gelen bir temizleme işlemi olmalıdır. Yaygın bir hata, temizlemeyi unutmaktır; bu da her bağımlılık değişikliğinde aralıkların üst üste birikmesine neden olur.

manualCleanup Seçeneği

Bir bileşenin dışında oluşturulan effect'ler için (örneğin sonsuza kadar yaşayan bir kök hizmetinde) manualCleanup seçeneğini kullanabilir, ardından uygun zamanda kendiniz ref.destroy() çağırabilirsiniz.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

Alternatif Olarak DestroyRef

Effect dışındaki kaldırma işlemleri için DestroyRef enjekte edebilir ve geri çağırma işlevlerini onDestroy ile kaydedebilirsiniz. Effect'lerin içinde, çalıştırma başına kaldırma işlemleri için onCleanup kullanmayı tercih edin.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Hepsini Birleştirme

Gecikmeli bir eşitleme effect'i: her değer değişikliği önceki zamanlayıcıyı iptal eder ve yeni bir kaydetme işlemi zamanlar.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Kısa Kontrol

Effect temizleme işlemini ne kadar anladığınızı test edin.

Özet: Effect Temizleme ve Yaşam Döngüsü

Bir effect'in içinde başlatılan kaynakları kaldırmak için onCleanup parametresini kullanın.

Temizleme, her yeniden çalıştırmadan önce ve yok etme sırasında gerçekleşir.
Zamanlayıcıları, dinleyicileri ve abonelikleri her zaman temizleyin.
Uzun ömürlü effect'ler için manualCleanup, genel kaldırma işlemleri için DestroyRef kullanın.

Sırada: linkedSignal ve gelişmiş kalıplar.

Sıkça Sorulan Sorular

“Efekt Temizleme ve Yaşam Döngüsü” dersi ücretsiz mi?

Evet — “Efekt Temizleme ve Yaşam Döngüsü” 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.

“Efekt Temizleme ve Yaşam Döngüsü” dersinde ne öğreneceğim?

Efektlerin içinde kaynakları temizleyin. 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 3. dersidir.

“Efekt Temizleme ve Yaşam Döngüsü” 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