Yükleniyor...

Yaşam Döngüsü (Lifecycle) Hookları

Yaşam Döngüsü (Lifecycle) Hookları, Angular bileşenlerinin yaşam süresi boyunca gerçekleşen farklı aşamalarda müdahale etmeyi sağlayan özel metodlardır. Bu hooklar, modern web uygulamaları ve SPA’larda bileşenlerin durum yönetimini, veri akışını ve performans optimizasyonunu kontrol etmek için kritik öneme sahiptir.
Angular’da başlıca hooklar arasında ngOnInit, ngOnChanges, ngAfterViewInit ve ngOnDestroy bulunur. ngOnInit, bileşen başlatıldığında veri ve aboneliklerin hazırlanması için kullanılırken; ngOnChanges, bileşenin aldığı @Input() değerlerinde değişiklik olduğunda tetiklenir. ngAfterViewInit, DOM ve alt bileşenler render edildikten sonra çalışır ve ngOnDestroy ise bileşen yok edilmeden önce kaynakları temizlemek ve abonelikleri sonlandırmak için kullanılır.
Bu eğitimde, reusable (yeniden kullanılabilir) bileşenler oluşturmayı, veri akışını ve state yönetimini etkin şekilde kullanmayı öğreneceksiniz. Ayrıca prop drilling, gereksiz re-renderlar ve doğrudan state mutasyonları gibi yaygın hatalardan kaçınmanın yollarını göreceksiniz. Angular lifecycle hooklarını doğru şekilde uygulamak, bileşenlerin tahmin edilebilir, verimli ve sürdürülebilir olmasını sağlar.

Temel Örnek

typescript
TYPESCRIPT Code 
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';

@Component({
selector: 'app-user-profile',
template: `       <div>         <h2>Kullanıcı Profili</h2>         <p>Ad: {{ name }}</p>         <p>Durum: {{ status }}</p>       </div>
`
})
export class UserProfileComponent implements OnChanges, OnInit, OnDestroy {
@Input() name!: string;
status: string = 'Başlatılıyor...';

constructor() {
console.log('Constructor: Bileşen oluşturuldu');
}

ngOnChanges(changes: SimpleChanges): void {
console.log('ngOnChanges: değişiklikler algılandı', changes);
}

ngOnInit(): void {
console.log('ngOnInit: bileşen başlatılıyor');
this.status = 'Aktif';
}

ngOnDestroy(): void {
console.log('ngOnDestroy: bileşen yok edilecek');
}
}

Bu örnekte UserProfileComponent, lifecycle hooklarını gösterir. Constructor yalnızca bileşen örneğini yaratır, ağır işlem yapmaz. ngOnChanges, @Input() değerlerindeki değişikliklere yanıt verir. ngOnInit veri ve abonelikleri başlatırken, ngOnDestroy kaynakları temizler ve hafıza sızıntılarını önler. Bu yapı, reusable ve stabil bileşenler oluşturmayı sağlar. Ayrıca gereksiz re-renderları ve doğrudan state mutasyonlarını önler. Angular’ın özel syntax ve konvansiyonları kullanılarak best practice’ler uygulanmıştır.

Pratik Örnek

typescript
TYPESCRIPT Code 
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

@Component({
selector: 'app-live-clock',
template: `       <div>         <h3>Canlı Saat ({{ timezone }})</h3>         <p>{{ currentTime }}</p>       </div>
`
})
export class LiveClockComponent implements OnInit, OnDestroy {
@Input() timezone: string = 'UTC';
currentTime: string = '';
private clockSubscription!: Subscription;

ngOnInit(): void {
console.log('ngOnInit: saat başlatılıyor');
this.clockSubscription = interval(1000).subscribe(() => {
const now = new Date();
this.currentTime = now.toLocaleTimeString('tr-TR', { timeZone: this.timezone });
});
}

ngOnDestroy(): void {
console.log('ngOnDestroy: saat durduruluyor');
if (this.clockSubscription) {
this.clockSubscription.unsubscribe();
}
}
}

LiveClockComponent örneğinde, lifecycle hookları veri akışı ve kaynak yönetimi için kullanılmıştır. ngOnInit, Observable üzerinden her saniye güncellenen saat bilgisini başlatır; ngOnDestroy ise aboneliği iptal ederek hafıza sızıntısını önler. Bu yaklaşım, gerçek zamanlı ve dinamik bileşenlerde performans ve güvenliği garanti eder.

Angular’da Yaşam Döngüsü Hookları için iyi uygulamalar ve yaygın hatalar:

  • ngOnInit ile veri ve abonelikleri başlatın, ngOnDestroy ile temizleyin.
  • DOM’a doğrudan müdahale ve state mutasyonu yapmaktan kaçının.
  • Ağır işlemleri hooklarda çalıştırmayın.
  • Gereksiz re-renderları önlemek için ChangeDetectionStrategy.OnPush kullanın.
  • Hassas verileri ngOnDestroy içinde temizleyerek güvenliği sağlayın.

📊 Referans Tablosu

Angular Element/Concept Description Usage Example
ngOnChanges @Input() değişikliklerinde çalışır Gelen verileri izlemek
ngOnInit Bileşen başlatıldığında çalışır Veri ve abonelik başlatmak
ngDoCheck Özel değişiklikleri izler Kompleks veri kontrolü
ngAfterViewInit View ve alt bileşenler render edildikten sonra DOM ve child bileşen erişimi
ngOnDestroy Bileşen yok edilmeden önce Abonelikleri iptal ve kaynak temizleme

Yaşam Döngüsü Hookları, Angular bileşenlerinde state yönetimi, veri akışı ve performans optimizasyonu açısından kritik bir rol oynar. Hookların doğru kullanımı, bileşenlerin tahmin edilebilir, reusable ve sürdürülebilir olmasını sağlar. İleri adım olarak ngAfterContentInit, ngAfterViewChecked ve RxJS optimizasyon tekniklerini inceleyebilirsiniz. Angular DevTools ile hook davranışlarını analiz etmek ve performansı ölçmek önerilir.

İlgili Arama Terimleri

Kullanıcılar bu içeriği bu terimlerle de araştırıyor:

Angular yaşam döngüsü hookları ngOnInit Angular örnek ngOnChanges kullanım Angular Angular bileşen state yönetimi Angular veri akışı SPA Angular lifecycle ngAfterViewInit Angular ngOnDestroy Angular Angular reusable component ChangeDetectionStrategy OnPush Angular Angular prop drilling önleme Angular observable hook kullanımı Angular lifecycle optimizasyon Angular performans artırma Angular DevTools hook analizi

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Angular Ders