يعد اكتشاف التغيير جانبًا أساسيًا في Angular، وهو مسؤول عن تحديد وتحديث أجزاء DOM التي تغيرت استجابة لتعديلات البيانات أو تفاعلات المستخدم. تضمن هذه العملية أن تظل واجهة المستخدم متسقة مع البيانات الأساسية، مما يعزز تجربة المستخدم وأداء التطبيق.

دور Zone.js

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

تغيير استراتيجيات الكشف

يوفر Angular استراتيجيتين أساسيتين للكشف عن التغيير:

• الافتراضي: يتم تشغيل اكتشاف التغيير بعد كل ربط في دورة الحياة، مثل ngOnInit أو ngAfterViewInit. هذه الإستراتيجية واضحة ومباشرة ولكنها يمكن أن تؤدي إلى تحديثات DOM غير ضرورية، خاصة في التطبيقات الكبيرة.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

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

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

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

في حين أن استراتيجية الكشف عن التغيير onPush قللت من عمليات التلاعب غير الضرورية في DOM، كان التحدي الأكبر في استراتيجية التغيير onPush هو أنه كان على المطورين القيام بالمزيد من الإدارة اليدوية وإطلاق التغييرات يدويًا. كان عليهم التعامل مع اكتشاف التغيير بشكل صريح باستخدام ChangeDetectorRef.detectChanges() في سيناريوهات معينة، مثل عندما تتغير البيانات بشكل غير مباشر أو عند استخدام كائنات قابلة للتغيير.

Angular 18 واكتشاف التغيير الهجين: نهج أقل منطقة

لمواجهة التحديات المرتبطة بـ Zone.js، قدمت Angular 18 ميزة تجريبية تعرف باسم Hybrid Change Detection. يهدف هذا الأسلوب إلى إزالة Zone.js تمامًا، باستخدام آلية جديدة للكشف عن التغييرات لاكتشاف التغييرات ومعالجتها في DOM.

تمكين اكتشاف التغيير المختلط:

لتمكين اكتشاف التغيير المختلط، يمكنك استخدام الكود التالي:

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

سيؤدي هذا إلى اكتشاف التغيير في السيناريوهات التالية:

• يتم تحديث الإشارة.
• يتم استدعاء ChangeDetectorRef.markForCheck().
• يتلقى أحد العناصر القابلة للملاحظة والمشتركة مع AsyncPipe قيمة جديدة.
• يتم توصيل أحد المكونات أو فصله.
• تم تعيين الإدخال.

بمجرد تمكين اكتشاف التغيير المختلط، يمكنك إزالة Zone.js بأمان من polyfills لتطبيقك.

 "polyfills": [
              "zone.js" //remove this line
            ],

فوائد الكشف عن التغيير المختلط

• تحسين الأداء: يؤدي القضاء على Zone.js إلى تقليل الحمل، مما يؤدي إلى أداء أفضل، خاصة في التطبيقات التي تحتوي على العديد من العمليات غير المتزامنة.

• تجربة مطور محسنة: تعمل إزالة الكشف عن التغيير اليدوي على تبسيط التطوير وتقليل احتمالية الأخطاء.

• حجم تطبيق أصغر: يضيف Zone.js عادةً حوالي 13 كيلو بايت إلى حجم التطبيق. يمكن أن تؤدي إزالته إلى حزمة أصغر.