Angular’da, ChangeDetection varsayılan olarak ChangeDetectionStrategy.Default olarak ayarlanmıştır. Bu strateji, değişiklik tespitini başlatmak için herhangi bir özel kod veya işlem yapmadan, her değişiklik için tüm bileşen ağacını yeniden tarar.
Bu stratejinin avantajı, herhangi bir bileşen özelliği değiştiğinde bileşenin anında yeniden render edilmesidir. Bu sayede bileşenin değişiklikleri zamanında ve doğru şekilde işleyebilir. Ancak, büyük veri kümeleri veya karmaşık bileşen ağaçları gibi performansı etkileyebilecek durumlarda bu stratejinin kullanılması dezavantajlı olabilir.
Default stratejisi, herhangi bir özel ayar yapmadan kullanılabilir. Bununla birlikte, bileşenlerdeki özellik sayısı arttıkça, değişiklik tespiti için tüm bileşen ağacının yeniden taranması performans sorunlarına neden olabilir. Bu durumda, OnPush stratejisi gibi performansı artırabilecek stratejiler kullanmak daha uygun olabilir.
'ChangeDetectionStrategy.Default' stratejisi kullanırken dikkat edilmesi gereken bazı hususlar şunlardır:
OnPushstratejisi kullanarak bileşenlerin performansını artırmak için bileşen özelliklerinin sık sık güncellenmesi gerekmektedir.Defaultstratejisi, herhangi bir özellik değiştiğinde bileşenin yeniden render edilmesini sağladığından, özelliklerin sık sık değişmesi performansı düşürebilir.Defaultstratejisi, karmaşık bileşen ağaçları için performans sorunlarına neden olabilir. Bu durumda, bileşenlerinOnPushstratejisi kullanarak performansı artırması gerekebilir.- Bileşenlerdeki karmaşık işlemler,
Defaultstratejisi kullanarak performansı düşürebilir. Bu nedenle, karmaşık işlemleri ayrı bir hizmette gerçekleştirmek ve bileşenlerde yalnızca sonuçları göstermek daha verimli olabilir.
Sonuç olarak, ChangeDetectionStrategy.Default stratejisi, performansı etkileyecek durumlar için uygun olmayabilir. Ancak, küçük ölçekli projeler ve basit bileşenler için uygun bir seçenektir. Karmaşık bileşenler için performansı artırmak için OnPush stratejisi veya diğer performans artırıcı yöntemler kullanılmalıdır.
ChangeDetectionStrategy.OnPush
Genel olarak, bir bileşenin ChangeDetectionStrategy özelliğini OnPush olarak ayarlamak, bileşenin performansını artırabilir. Bu strateji, sadece bileşenin @Input özellikleri veya Observable verileri değiştiğinde yeniden render edilmesini sağlar. Bu, bileşenin gereksiz yere yeniden render edilmesini önler ve uygulamanın performansını artırır.
Ancak, OnPush stratejisi, bileşenin iç durumunun değiştiği durumlarda yeniden render edilmeyebilir. Bileşenin dahili durumu, @Input veya Observable verilerine bağlı olmayan bir değişken tarafından da değiştirilebilir. Bu durumda, bileşenin yeniden render edilmesi için ChangeDetectorRef nesnesinin detectChanges() yöntemi çağrılmalıdır.
OnPush stratejisi, özellikle büyük bir veri kümesi üzerinde çalışan bileşenler için yararlıdır. Örneğin, bir liste bileşeni, bir veri kaynağından büyük bir veri kümesi alıyorsa ve sadece filtreleme veya sıralama gibi bir işlem yapıldığında yeniden render edilmesi gerekiyorsa, OnPush stratejisi kullanılabilir. Bu, gereksiz render işlemlerini önleyerek uygulamanın performansını artırır.
Öte yandan, bir bileşen, sıklıkla değişen bir durum veya @Input özelliği içeriyorsa, OnPush stratejisi kullanmak performansı düşürebilir. Bu durumda, bileşenin varsayılan stratejisi kullanılmalıdır.
Aşağıda, OnPush stratejisi kullanarak bir bileşenin nasıl oluşturulacağına dair bir örnek verilmiştir:
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<div>{{ name }}</div>
<button (click)="updateName()">Update Name</button>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
@Input() name: string;
constructor(private cdr: ChangeDetectorRef) { }
updateName() {
this.name = 'New Name';
this.cdr.detectChanges(); // `OnPush` stratejisi kullanıldığında, `detectChanges()` yöntemi çağrılmalıdır
}
}
Yukarıdaki kod, OnPush stratejisi kullanarak bir bileşen oluşturur. @Input özelliği olan name değişti
ğında bileşenin yeniden render edilmesi için ChangeDetectorRef nesnesinin detectChanges() yöntemi çağrılır. Bu, bileşenin sadece name özelliği değiştiğinde yeniden render edilmesini sağlar.
OnPush stratejisi, ChangeDetectorRef nesnesinin markForCheck() yöntemi ile de kullanılabilir. Bu yöntem, bileşenin yeniden render edilmesi gerektiğini işaret eder, ancak değişiklikleri anında uygulamaz. Bunun yerine, değişikliklerin uygulanması, Angular tarafından gerekli bir zamanlama ile yapılır.
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<div>{{ name }}</div>
<button (click)="updateName()">Update Name</button>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
@Input() name: string;
constructor(private cdr: ChangeDetectorRef) { }
updateName() {
this.name = 'New Name';
this.cdr.markForCheck(); // `OnPush` stratejisi kullanıldığında, `markForCheck()` yöntemi çağrılabilir
}
}
Yukarıdaki kod, OnPush stratejisi kullanarak bir bileşen oluşturur. @Input özelliği olan name değiştiğinde bileşenin yeniden render edilmesi gerektiği markForCheck() yöntemi ile işaretlenir. Bu yöntem, bileşenin değişiklikleri zamanında işlemesini sağlar.
Sonuç olarak, OnPush stratejisi, performansı artırarak büyük veri kümeleri üzerinde çalışan bileşenlerin daha verimli çalışmasını sağlar. Ancak, her durumda kullanmak performansı düşürebilir. Bileşenin ihtiyaçlarına ve uygulamanın gereksinimlerine bağlı olarak, uygun stratejinin kullanılması gerekmektedir