Kaip veikia Angular pokyčių nustatymas ir ką daro OnPush?

Question

Accepted Answer

**Change detection** yra tai, kaip Angular laikotina DOM sinchronizuota su komponentų duomenimis — po bet kokio potencialiai būseną keičiančio įvykio, jis patikrina komponentus ir atnaujina rodinį, kur duomenys pasikeitė. Pagal numatytuosius nustatymus šis tikrinimas yra platus; **`OnPush`** jį susiaurina našumo tikslu.

## Kaip veikia numatytasis pokyčių nustatymas

```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.
```

Pagal numatytuosius nustatymus (`Default` strategija), Angular iš naujo patikrina **kiekvieną komponentą** prie kiekvieno įvykio — teisinga, bet gali būti neekonomiškai dideliais medžiais.

## OnPush — praleiskite komponentus, kurie negali pasikeisti

```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;
}
```

Su `OnPush`, Angular **praleiskite** šio komponento patikrinimą, jei neatsitiks vienas iš šių:

```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()
```

Tai gali drastiškai sumažinti darbą dideliais medžiais — Angular ignoruoja visus medžio pomedžius, kurie, jo manymu, negali pasikeisti.

## Pagrindinė grėsmė: reikalinga nekeičiamumas

```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` remiasi **nuorodų keitimais** įvestims, todėl turite atnaujinti būseną nekeičiamai (nauji objektai/masyvai). Vietoje mutavimas yra klasikinis OnPush klaidas — peržiūra neatnaujins.

## Rankinis valdymas

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

## Ateitis: signalai + be zonių

Signalai įgalina dar tikslesnį, **smulkiagranulį** atnaujinimą (tik rodiniai, skaitantys pasikeitusį signalą), nurodydami kelią į visišką Zone.js pašalinimą.

## Kodėl tai svarbu

Pokyčių nustatymas yra pagrindinė Angular našumo dalis.

Supratimas, kad numatytoji strategija patikrina visą medį — ir kad `OnPush` + nekeičiami duomenys riboja tikrinimus komponentais, kurių įvestys iš tikrųjų pasikeitė — yra pagrindinė svirtis didelių programų optimizavimui.

Nekeičiamumo reikalavimas yra dažna šaltinis "kodėl mano peržiūra neatnaujina?" klaidoms, o signalai rodo, kur Angular eina tolesniu keliu, dar smulkiagranulei, efektyvesnei reaktyvumui.