فهم الفرق بين OnChanges و DoCheck في Angular 2

في Angular 2، هناك اختلاف بين OnChanges و DoCheck في كيفية تفاعلهما مع تغييرات البيانات ومتى يتم استدعاؤهما بالضبط. دعنا نلقي نظرة عميقة على كل منهما:

1. OnChanges:

   • يُستخدم لرصد تغييرات الإدخالات المقدمة للكمبوننت.
   • يحتوي على طرق تمكنك من الاطلاع على قيم الإدخالات القديمة والجديدة.
   • يتم استدعاؤه عندما يتغير أحد الإدخالات الممررة إلى الكمبوننت.
   • تتم معالجة الكود الموجود فيه قبل استدعاء ngOnInit.

2. DoCheck:

   • يُستخدم للكشف عن تغييرات تتطلب تفقد يدوي.
   • يتيح لك الفرصة لتنفيذ الأكواد التي يمكن أن تؤدي إلى تغييرات غير متوقعة.
   • يستدعى في كل دورة تحكم (change detection cycle).
   • يُعتبر أداة قوية للتحقق من أي تغييرات قد تحدث خارج نطاق Angular.

يجب أن تستخدم OnChanges عندما تحتاج إلى رصد تغييرات في إدخالات الكمبوننت، بينما يُستخدم DoCheck عندما تريد الكشف عن تغييرات يمكن أن تحدث خارج النطاق التلقائي لـ Angular.

على سبيل المثال، إذا كان لديك قيمة تريد تحققها بشكل دوري وتحديثها يدويًا بدلاً من الانتظار حتى تتم دورة الكشف التلقائي في Angular، فيمكنك استخدام DoCheck.

إذا كان لديك أي استفسار آخر حول Angular 2، فلا تتردد في طرحه!

بالطبع! دعنا نستكشف المزيد من المعلومات حول OnChanges و DoCheck في Angular 2:

1. OnChanges:

   • يمكنك استخدام ngOnChanges لتنفيذ الأكواد التي تستجيب لتغييرات في الإدخالات (@Input) المرتبطة بالكمبوننت.
   • يمكنك الوصول إلى كائن SimpleChanges الذي يحتوي على قيم الإدخالات القديمة والجديدة.
   • عندما يتغير أحد الإدخالات الممررة إلى الكمبوننت، يتم استدعاء ngOnChanges.
   • يُعتبر ngOnChanges مناسبًا لتحديثات تتطلب معالجة فورية بمجرد حدوث التغيير.

2. DoCheck:

   • يُعتبر ngDoCheck مناسبًا للتحقق من التغييرات التي لا يمكن كشفها تلقائيًا من قبل Angular.
   • يمكنك استخدام ngDoCheck لتنفيذ رمز يتعامل مع تغييرات يمكن أن تحدث بشكل مستقل عن دورة الكشف التلقائي.
   • يجب استخدامه بحذر، لأنه يتم استدعاؤه في كل دورة تحكم، وقد يؤدي إلى أداء ضعيف إذا لم يُستخدم بشكل صحيح.

عند استخدام DoCheck، يجب توخي الحذر لتجنب أداء سيء بسبب تنفيذ الكود بشكل غير ضروري. إذا كنت تحتاج إلى معرفة متى يتم استدعاء ngDoCheck بالضبط، يمكنك وضع تعليمات console.log داخل ngDoCheck لمراقبة تغييراتها.