ما هو كشف التغيير؟ دعونا نتحدث عن آلية التغيير الزاوي

ما هو كشف التغيير؟ ستتحدث المقالة التالية عن آلية اكتشاف التغيير في Angular، وستقدم كيفية إشعار تغييرات الحالة باكتشاف التغيير، واستراتيجية اكتشاف التغيير في Angular، وآمل أن تكون مفيدة للجميع.

1. ما هو كشف التغيير؟

• الملخص:检测机制التغيير التي تعبر شجرة المكونات، وتتحقق من التغييرات في كل مكون، وتطلق تحديثات DOM عندما تتغير خصائص المكون. [البرامج التعليمية الموصى بها: "البرنامج التعليمي الزاوي"]

• المهمة الأساسية لاكتشاف التغيير: الحصول على状态الداخلية للبرنامج وجعلها可见في واجهة المستخدم. يمكن أن تكون هذه الحالة أي كائن أو صفيف أو نوع بيانات أساسي.

2. ما سبب التغيير؟

تنقسم المصادر المعتمدة على الأحداث إلى الفئات الثلاث التالية:

• الأحداث: النقر على الصفحة، إرسال، الماوس لأسفل...

• XHR: الحصول على البيانات من الخادم الخلفي

• الموقتات: setTimeout ()، setInterval ()

تشترك هذه النقاط في شيء واحد، وهو أنها جميعها غير متزامنة، أي أن جميع异步操作هي العوامل الجذرية التي قد تسبب تغييرات في البيانات، لذلك كلما تم تنفيذ بعض العمليات غير المتزامنة، قد تتغير حالة تطبيقنا. في هذا الوقت، تحتاج إلى تحديث العرض

3. كيفية الإخطار باكتشاف التغيير بتغييرات الحالة

في Angular يتم توصيل NgZone ، الذي يراقب جميع异步事件في Angular وستعيد كتابة (من خلال Zone.js ) بعض واجهات برمجة تطبيقات المتصفح الأساسية عند بدء التشغيل (اعتراض جميع الأحداث غير المتزامنة بعنف).

هناك طريقتان شائعتان لتشغيل اكتشاف التغيير. تعتمد إحدى الطرق على خطافات دورة حياة المكون.

 ngAfterViewChecked() {
console.log('القرص المضغوط للمجموعة الرئيسية.component');
}

هناك طريقة أخرى وهي التحكم يدويًا في اكتشاف التغيير أو إيقاف تشغيله وتشغيله يدويًا

 منشئ (قرص مضغوط خاص: ChangeDetectorRef) {
مؤتمر نزع السلاح ()
setInterval(() => {
this.cd.detectChanges()
}، 5000)
}

3. كشف التغيير الزاوي

جوهر Angular هو المكونات. سيشكل تداخل المكونات في النهاية组件树. يمكن تقسيم اكتشاف التغيير في Angular إلى مكونات. يحتوي كل مكون على变化检测器ChangeDetector المقابل. ومن المتصور أن تشكل كاشفات التغيير هذه شجرة أيضًا.
في Angular، يحتوي كل مكون على كاشف التغيير الخاص به، مما يسمح لنا بالتحكم في كيفية ووقت إجراء اكتشاف التغيير لكل مكون.

4. تغيير استراتيجية الكشف

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

• الافتراضي: سيؤدي每次اكتشاف تغيير إلى اكتشاف تغيير المكون، بما في ذلك تغييرات حالة其他组件والتغييرات في قيم السمات الداخلية للمتغيرات المرجعية本组件

• Onpush: كل اكتشاف للتغيير سوف يتخطى التحقق من التغيير لهذا المكون ما لم满足一些条件.

4.1 الافتراضي

آلية الكشف عن التغيير الافتراضية في Angular هي ChangeDetectionStrategy.Default . بعد انتهاء كل رد اتصال لحدث غير متزامن، سيقوم NgZone بتشغيل整个组件树لإجراء اكتشاف التغيير至上而下

4.2 onPush

استراتيجية OnPush، تُستخدم跳过اكتشاف التغيير لأحد المكونات وجميع所有子组件الموجودة تحته

في الواقع، بعد تعيين سياسة OnPush ، لا يزال هناك العديد من الطرق لتحفيز اكتشاف التغيير؛

• 1) يتغير引用سمة @Input الخاصة بالمكون.

• 2) أحداث DOM داخل المكون، بما في ذلك أحداث DOM لمكوناته الفرعية، مثل click、submit、mouse down .

• 3) يشترك Observable في المكون في الحدث ويقوم بتعيين Async pipe في نفس الوقت.

• 4) استخدم يدويًا الأساليب ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() في المكون.

5. تغيير مرجع كائن الكشف

• markForCheck(): يستخدم للمكونات子组件该子组件到根组件، وإخطار الكاشف الزاوي一定من المكونات الموجودة على هذا المسار أثناء اكتشاف التغيير التالي، حتى إذا تم تعيين استراتيجية اكتشاف التغيير على onPush

• DetectChanges(): بدء اكتشاف التغيير يدويًا من该组件到各个子组件

• فصل ():脱离كاشف المكون عن عدد أجهزة الكشف ولن يتم التحكم فيه بواسطة آلية الكشف ما لم يتم إعادة توصيله.

• إعادة التوصيل ():重新链接الكاشف المنفصل بشجرة الكاشف