როგორ მუშაობს Angular-ის ცვლილებების დეტექცია და რას აკეთებს OnPush?

Question

Accepted Answer

**Change detection** არის ის, თუ როგორ ინახავს Angular DOM კომპონენტის მონაცემებთან სინქრონიზებულს — ნებისმიერი მდგომარეობის შეცვლის შემდეგ, ის იყოფს კომპონენტებს და განაახლებს ხედს, სადაც მონაცემები შეცვლილია. ნაგულისხმევად ეს შემოწმება ფართო; **`OnPush`** ამას ვიწროვდება შესრულების გაუმჯობესებისთვის.

## როგორ მუშაობს ნაგულისხმევი ცვლილებების დეტექცია

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

ნაგულისხმევად (`Default` სტრატეგია), Angular ხელახლა ამოწმებს **თითოეული კომპონენტი** ყველა ღვაბზე — სწორი, მაგრამ შესაძლოა დახარჯული დიდი ხეების დროს.

## OnPush — გამოტოვა კომპონენტები, რომლებიც არ შეიძლება შეიცვალოს

```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` გამოიყენებისას, Angular **გამოტოვებს** ამ კომპონენტის შემოწმებას, თუ ერთი მათ არ მოხდება:

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

ეს შეიძლება მკვეთრად შეამციროს სამუშაო დიდი ხეებში — Angular უგულებელყოფს სრულ ქვე-ხეებს, რომლებიც, როგორც იცის, ვერ იცვლება.

## ძირითადი პრობლემა: უცვლელობა აუცილებელია

```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` ეყრდნობა **მითითებების ცვლილებებზე** შეტანებისთვის, ამიტომ თქვენ უნდა განაახლოთ მდგომარეობა უცვლელი გზით (ახალი ობიექტები/მასივები). ადგილზე მუტაცია არის OnPush ის კლასიკური ხარვეზი — ხედი არ განახლდება.

## ხელით კონტროლი

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

## მომავალი: signals + zoneless

Signals უფრო ზუსტ, **დეტალური** განახლებებს აძლევენ امکان (მხოლოდ ხედები, რომლებიც წაკითხულ შეცვლილ signal-ს), რომელიც მიუთითებს Zone.js-ის სრული წაშ退 ს მიმართულებაზე.

## რატომ არის ეს მნიშვნელოვანი

ცვლილებების დეტექცია მნიშვნელოვანია Angular ის ძალაშემოსილობის მუშაობისთვის.

გაგება, რომ ნაგულისხმევი სტრატეგია ელემენტების მთელ ხეს აზოგადებს — და რომ `OnPush` + უცვლელი მონაცემები შემოწმებას აკვებს მხოლოდ კომპონენტებისკენ, რომელთა შეტანებები ნამდვილად შეიცვალა — არის უმთავრესი ბერკეტი დიდი აპლიკაციების ოპტიმიზაციისთვის.

უცვლელობის მოთხოვნა არის ხშირი ხარვეზის წყარო "რატომ არ განახლდება ჩემი ხედი?", და signals გვიჩვენებს, რომელი მიმართულებით მიდის Angular კიდევ უფრო დეტალური, უფრო ეფექტური რეაქტიულობისთვის.