Angular Academy · درس

كيف تعمل آلية اكتشاف التغييرات

افهم دورة اكتشاف التغييرات في Angular

كيف تعمل آلية اكتشاف التغييرات درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

ما اكتشاف التغييرات؟

اكتشاف التغييرات هو العملية التي يستخدمها Angular للحفاظ على تزامن DOM مع حالة المكوّن. عند تغير البيانات، يعيد Angular تقييم الارتباطات ويحدّث ما اختلف فقط.

دورة الاكتشاف

يتنقل Angular عبر شجرة المكوّنات من الجذر إلى الأسفل، ويفحص ارتباطات كل مكوّن. وتُعد هذه العملية من الأعلى إلى الأسفل دورة اكتشاف تغييرات واحدة (tick).

ما الذي يشغّل tick؟

بشكل افتراضي، يشغّل Angular اكتشاف التغييرات بعد الأحداث غير المتزامنة: أحداث DOM، والمؤقتات، واستجابات HTTP. وينسّق Zone.js ذلك.

Zone.js

يعدّل Zone.js واجهات برمجة التطبيقات غير المتزامنة (setTimeout وaddEventListener وPromise وXHR) بحيث يعرف Angular متى تنتهي إحداها ومتى قد يحتاج إلى tick.

// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.

NgZone

يغلّف NgZone ‏Zone.js ليستخدمه Angular. ويمكنك تشغيل التعليمات البرمجية خارج نطاق Angular لتجنب تشغيل اكتشاف التغييرات في الحلقات المتكررة بكثافة.

private zone = inject(NgZone);

this.zone.runOutsideAngular(() => {
  // heavy work, no CD triggered
});

إعادة الدخول إلى النطاق

لتحديث واجهة المستخدم من خارج النطاق، أعد الدخول إليه باستخدام run لكي يجدول Angular تنفيذ tick.

this.zone.run(() => {
  this.ready = true;
});

الاستراتيجية الافتراضية

باستخدام الاستراتيجية الافتراضية، يُفحص كل مكوّن في كل tick. وهذا بسيط وآمن، لكنه قد يكون غير فعّال في الأشجار الكبيرة.

مقارنة الارتباطات

يقارن Angular القيمة الحالية لكل ارتباط بقيمته السابقة باستخدام Object.is. وإذا لم تتغير القيمة، فلا يُلمس DOM.

يجب أن تكون التعبيرات خالصة

تُشغّل تعبيرات القالب في كل عملية فحص، ولذلك يجب أن تكون سريعة وخالية من الآثار الجانبية. تجنب استدعاء الدوال المكلفة مباشرةً في القوالب.

<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>

ExpressionChangedAfterChecked

يشغّل Angular في وضع التطوير عملية تحقق ثانية. إذا تغيرت قيمة بين العمليتين، فستحصل على ExpressionChangedAfterItHasBeenCheckedError، ما يشير إلى تغير الحالة أثناء العرض.

تحكم يدوي

احقن ChangeDetectorRef للتحكم في الاكتشاف: تمنحك الدوال markForCheck() وdetectChanges() وdetach() تحكمًا دقيقًا.

private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();

اختبار سريع

اختبر مدى فهمك لاكتشاف التغييرات.

مراجعة

تعلّمت أن اكتشاف التغييرات هو عملية فحص لشجرة من الأعلى إلى الأسفل تزامن الحالة مع DOM، وتُشغّلها الأحداث غير المتزامنة عبر Zone.js/NgZone، مع مقارنة الارتباطات باستخدام Object.is. ويوفر ChangeDetectorRef تحكمًا يدويًا.

الأسئلة الشائعة

هل درس «كيف تعمل آلية اكتشاف التغييرات» مجاني؟

نعم — نص درس «كيف تعمل آلية اكتشاف التغييرات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «كيف تعمل آلية اكتشاف التغييرات»؟

افهم دورة اكتشاف التغييرات في Angular تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «كيف تعمل آلية اكتشاف التغييرات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy