61. استراتيجية اكتشاف التغيير: الافتراضية مقابل OnPush

اكتشاف التغيير (Change Detection - CD) هو عملية Angular للتحقق من حالة التطبيق لمعرفة ما إذا كانت أي بيانات قد تغيرت، وإذا كان الأمر كذلك، تحديث العرض (DOM) وفقاً لذلك. يحدث هذا الفحص بشكل متكرر جداً.

1. استراتيجية اكتشاف التغيير الافتراضية (ChangeDetectionStrategy.Default)

في الاستراتيجية الافتراضية، يكون Angular متشائماً بشكل أساسي. يفترض أن أي خاصية بيانات مستخدمة في القالب قد تكون قد تغيرت، بغض النظر عن السبب. يتم تشغيل دورة CD بواسطة:

• أي حدث DOM (نقر، ضغطة مفتاح).
• استجابات HTTP.
• المؤقتات (setTimeout, setInterval).
• حل الـ Promises.

عندما يحدث تغيير في أي مكان، يتحقق Angular من جميع المكونات، من الجذر إلى الورقة، بشكل متكرر. على الرغم من سرعة هذه العملية، إلا أنها يمكن أن تصبح عنق زجاجة في التطبيقات الكبيرة جداً.

2. استراتيجية اكتشاف التغيير OnPush (ChangeDetectionStrategy.OnPush)

OnPush هو النهج المتفائل. المكون المُعلَّم بـ OnPush سيقوم بتشغيل اكتشاف التغيير (فحص قالبه وتشغيل فحوصات على أطفاله) فقط إذا حدث أحد ما يلي:

1. تغيير مرجع الإدخال (Input Reference Change): تتغير خاصية إدخال المكون (@Input()) مرجعها (أي أن عنوان ذاكرة الكائن/المصفوفة مختلف). التغييرات داخل كائن (الطفرة/mutation) يتم تجاهلها.
2. إطلاق حدث (An Event Fired): يتم تشغيل مُعالج حدث (Event handler) مُرفق بالمكون أو أطفاله.
3. إطلاق Observable (باستخدام AsyncPipe): يُطلق Observable مُربط عبر AsyncPipe قيمة جديدة.
4. تشغيل يدوي (Manual Trigger): يتم تشغيل اكتشاف التغيير يدوياً باستخدام ChangeDetectorRef.

تطبيق OnPush

typescript import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({ selector: 'app-optimized-list', templateUrl: './optimized-list.component.html', changeDetection: ChangeDetectionStrategy.OnPush // <-- استخدم هذا }) export class OptimizedListComponent { /* ... */ }

يعمل OnPush على تحسين الأداء بشكل كبير عن طريق تخطي فروع كبيرة من شجرة المكونات ما لم يتم إخطارها صراحةً بحدوث تغيير.