Mi az a Change Detection az Angularban, és miben különbözik az OnPush stratégia az alapértelmezettől?

A Change Detection Angularben egy olyan mechanizmus, amely nyomon követi a komponens adataiban bekövetkező változásokat, és frissíti a DOM-ot, hogy tükrözze az alkalmazás aktuális állapotát. Az Angular automatikusan ellenőrzi a komponenseket a változások szempontjából, és frissíti a nézetet, amikor az adatok változnak.

Az alapértelmezett stratégia (Default) azt jelenti, hogy az Angular minden esemény, időzítő vagy aszinkron hívás esetén ellenőrzi a komponenst és összes gyermekkomponensét, ami teljesítmény szempontjából költséges lehet.

Az OnPush stratégia optimalizálja a teljesítményt azzal, hogy csak akkor ellenőrzi a komponenst, ha:

• Az @Input változott (hivatkozás szerinti összehasonlítás),
• Belső esemény történt a komponensen belül,
• Vagy a detectChanges manuálisan lett meghívva.

Ez lehetővé teszi az ellenőrzések számának csökkentését és a teljesítmény növelését, különösen nagy alkalmazások esetén.

Az OnPush használatának példája:

@Component({
  selector: 'my-component',
  template: `{{data.name}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: { name: string };
}

Itt az Angular csak akkor frissíti a komponenst, ha a data referencia megváltozik.