كيف يعمل كشف التغييرات في Angular، وماذا يفعل OnPush؟

Question

Accepted Answer

**كشف التغييرات** هو كيفية مواكبة 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 تحديثات أكثر دقة و**دقيقة الحبيبات** (فقط الآراء التي تقرأ إشارة متغيرة)، مشيرة إلى إزالة Zone.js بالكامل.

## لماذا هذا مهم

كشف التغييرات مركزي لأداء Angular.

فهم أن الاستراتيجية الافتراضية تفحص الشجرة بأكملها — وأن `OnPush` + البيانات غير القابلة للتغيير تحد من الفحوصات إلى المكونات التي تغيرت مدخلاتها فعلاً — هذا هو الرافعة الرئيسية لتحسين التطبيقات الكبيرة.

متطلب عدم القابلية للتغيير هو مصدر متكرر لأخطاء "لماذا لا يتم تحديث عرضي؟"، و Signals تمثل اتجاه Angular نحو تحديثات أكثر دقة وكفاءة.