Conas a oibríonn brú athraithe Angular, agus cad a dhéanann OnPush?

Question

Accepted Answer

**Brú athraithe** an modh a choimeádann Angular an DOM i sioncronacht le sonraí na gcomponentí — tar éis aon imeachta a d'fhéadfadh staid a athrú, seiceálann sé componentí agus nuashonraíonn sé an fhianaise áit ar athraith na sonraí. De réir réamhshocraithe tá an seiceáil seo leathan; **`OnPush`** theorannaíonn sí i gcomhair feidhmíochta.

## Conas a oibríonn brú athraithe réamhshocraithe

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

De réir réamhshocraithe (straitéis `Default`), seiceálann Angular **gach componentú** ar gach imeachta — ceart, ach go poitéinsiúil dramhdhíolacach in úsáidí móra.

## OnPush — componentí a scip nach bhféadfaidh a bheith athraithe

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

Le `OnPush`, **scipeálann** Angular seiceáil an chomponentú seo mura dtarlaíonn ceann de na nithe seo:

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

Séarafadhais seo an obair go leor in úsáidí móra — déanann Angular neamhaird ar fhofhuincí ar fad a fhios aici nach bhféadfaidh a bheith athraithe.

## An gréine príobháideach: imfholuain ar éigean

```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` ag brath ar **athruithe tagartha** i gcomhair ionchur, mar sin caithfidh tú staid a nuashonrú go neamhbhraisteanach (réada/eagair nua). Ag socrú in áit ar leith an fhabhtanna clasaiceach OnPush — ní nuashonróidh an fhianaise.

## Smacht lámh

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

## An todhchaí: comharthaí + gan chríoch

Ceadaíonn comharthaí nuashonruithe níos cruinne agus **fíneálta** (fianaise amháin a léamh comhartha athraithe), ag díriú ar Zone.js a bhaint ar fad.

## Cén fáth a bhíonn sé tábhachtach

Tá brú athraithe lárnach do fheidhmíochta Angular.

A thuiscint go bhfuinneann an straitéis réamhshocraithe an fhuinneog ar fad — agus go ndéanann `OnPush` + sonraí neamhbhraisteanach srianta ar sheiceáil do chomponentí ar athraith a ionchur i ndáiríre — is é an phríomhdhoras maidir le feidhmíochta a optúnú i ngach leabhar.

Is é an riachtanas imfholuain foinse minic a bhaineann le fabhtanna "cén fáth nach bhfuil mo fhianaise ag nuashonrú?", agus is ionadh a dhéanann comharthaí i dtreó a bhfuil Angular ag dul chun tuilleadh fíneálachta agus éifeachtúlachta.