Kuinka muutoksentunnistus toimii Angularissa ja mitä OnPush tekee?

Question

Accepted Answer

**Muutoksentunnistus** on se, kuinka Angular pitää DOM:n synkronoituna komponenttien tietojen kanssa — minkä tahansa tilaa mahdollisesti muuttavan tapahtuman jälkeen se tarkistaa komponentit ja päivittää näkymän siellä missä tiedot ovat muuttuneet. Oletuksena tämä tarkistus on laaja; **`OnPush`** kaventaa sitä suorituskyvyn vuoksi.

## Kuinka oletuksellinen muutoksentunnistus toimii

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

Oletuksena (`Default`-strategia) Angular tarkistaa uudelleen **jokaisen komponentin** jokaisessa tapahtumassa — oikein, mutta mahdollisesti tuhlailevaa suurissa puissa.

## OnPush — ohita komponentit jotka eivät ole voineet muuttua

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

`OnPush`-asetuksella Angular **ohittaa** tämän komponentin tarkistamisen ellei yksi näistä tapahdu:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

Tämä voi vähentää työtä dramaattisesti suurissa puissa — Angular jättää huomiotta koko alipuut joiden tietää, ettei ne voineet muuttua.

## Pääasiallinen sudenkuoppa: muuttumattomuus vaaditaan

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` perustuu **viitteen muutoksiin** syötteiden osalta, joten sinun on päivitettävä tila muuttumattomasti (uudet objektit/taulukot). Paikallaan muuttaminen on klassinen OnPush-virhe — näkymää ei päivitetä.

## Manuaalinen hallinta

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## Tulevaisuus: signals + zoneless

Signals mahdollistavat vielä tarkempia, **hienorakeisia** päivityksiä (vain näkymät jotka lukevat muutettua signaalia), mikä osoittaa Zone.js:n täydelliseen poistamiseen.

## Miksi tämä on tärkeää

Muutoksentunnistus on keskeinen Angular-suorituskykyyn.

Ymmärrys siitä, että oletusstrategia tarkistaa koko puun — ja että `OnPush` + muuttumattomat tiedot rajoittavat tarkistuksia komponentteihin joiden syötteet ovat todellakin muuttuneet — on pääasiallinen vipuvarsi suurten sovellusten optimoinnissa.

Muuttumattomuusvaatimus on usein "miksi näkymää ei päivitetä?" -virheiden lähde, ja signals edustavat sitä suuntaa minne Angular on menossa vielä hienorakeisemmaksi, tehokkaammaksi reaktiivisuudeksi.