Angular Academy · Ders

Abonelikten Çıkma ve Bellek Sızıntıları

takeUntilDestroyed ile sızıntıları önleyin.

Abonelikten Çıkma ve Bellek Sızıntıları, 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.

Bellek Sızıntısı Sorunu

Uzun ömürlü bir observable'a bir bileşen içinde abone olur ve abonelikten hiç çıkmazsanız geri çağırma işlevi bileşen yok edildikten sonra da çalışmaya devam eder. Bu durum bellek sızıntısına ve hatalara ya da yinelenen işlemlere yol açabilir.

Elle Abonelikten Çıkma

Temel çözüm şudur: Subscription'ı saklayın ve ngOnDestroy içinde abonelikten çıkın.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

Birden Çok Aboneliği Yönetme

Tek bir Subscription, .add() ile alt abonelikleri toplayabilir; ardından tek bir unsubscribe() hepsini sonlandırır.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular, bileşen yok edildiğinde akışı otomatik olarak tamamlayan takeUntilDestroyed() işlevini sağlar; elle ngOnDestroy yazmanız gerekmez.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

Ekleme Bağlamı Gereksinimi

Bağımsız değişken olmadan çağrıldığında takeUntilDestroyed() bir ekleme bağlamında (örneğin oluşturucuda) çalışmalıdır. Bunun dışında, açıkça bir DestroyRef aktarın.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

takeUntil Deseni (Klasik)

takeUntilDestroyed'dan önce standart desende ngOnDestroy içinde yayımlama yapan bir Subject kullanılırdı.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Tamamlanan Akışlarda Temizleme Gerekmez

HttpClient istekleri bir kez değer yayımlayıp tamamlanır; bu nedenle kendilerini temizlerler. Genellikle tek bir HTTP çağrısından abonelikten çıkmanız gerekmez; yine de takeUntilDestroyed kullanmak güvenlidir.

async Pipe Bunu Sizin İçin Yönetir

Şablonlar için en iyi yaklaşım, async pipe'ın otomatik olarak abone olup abonelikten çıkmasına izin vermektir. Bunu bir sonraki derste ele alacağız.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

Abonelik Sızıntısının Belirtileri

Yinelenen ağ istekleri, gezinmeden sonra çalışan işleyiciler, geliştirme araçlarında artan bellek kullanımı veya "Cannot read property of destroyed view" hataları genellikle unutulmuş abonelikten çıkma işlemlerine işaret eder.

toSignal da Otomatik Temizlenir

Bir observable'ı toSignal() ile sinyale dönüştürmek, sahibi olan bağlam yok edildiğinde abonelikten otomatik olarak çıkar.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

Bir Yaklaşım Seçme

Şablonlarda async pipe'ı veya toSignal'ı tercih edin; elle yapılan abonelikler için takeUntilDestroyed() kullanın; yalnızca gerektiğinde Subscription koleksiyonuna başvurun.

Kısa Kontrol

Abonelikten çıkma hakkındaki anlayışınızı sınayın.

Özet: Abonelikten Çıkma ve Bellek Sızıntıları

Uzun ömürlü abonelikleri her zaman sonlandırın.

takeUntilDestroyed(), yok edilme sırasında akışı otomatik olarak tamamlar.
async pipe ve toSignal() abonelikleri sizin için yönetir.
Tek HTTP çağrıları kendiliğinden tamamlanır.

Sırada: async pipe'ın ayrıntılı incelenmesi.

Sıkça Sorulan Sorular

“Abonelikten Çıkma ve Bellek Sızıntıları” dersi ücretsiz mi?

Evet — “Abonelikten Çıkma ve Bellek Sızıntı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.

“Abonelikten Çıkma ve Bellek Sızıntıları” dersinde ne öğreneceğim?

takeUntilDestroyed ile sızıntıları önleyin. 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.

“Abonelikten Çıkma ve Bellek Sızıntı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

← Angular Academy Sayfasına Dön