Angular Academy · درس

اكتشاف التغييرات باستخدام OnPush

قلّل عمليات الفحص باستخدام استراتيجية OnPush

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

مشكلة الأداء

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

تفعيل OnPush

اضبط الخيار changeDetection في المكوّن.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user().name }}'
})
export class UserComponent {}

متى يعيد OnPush التحقق

لا يخضع مكوّن OnPush للتحقق إلا عند حدوث أحد الأمور التالية: تغيّر مرجع @Input، أو وقوع حدث من القالب الخاص به، أو إصدار observable مرتبط باستخدام async قيمة، أو استدعاء markForCheck().

مساواة مراجع المدخلات

يقارن OnPush مراجع المدخلات باستخدام Object.is. لا يؤدي تعديل كائن في مكانه إلى إعادة التحقق؛ بل يجب تمرير مرجع جديد.

// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };

تساعد عدم القابلية للتغيير

ينسجم OnPush طبيعيًا مع البيانات غير القابلة للتغيير. أنشئ دائمًا كائنات أو مصفوفات جديدة بدلًا من تعديل البيانات، كي تكتشف فحوص المراجع التغييرات بشكل موثوق.

this.items = [...this.items, newItem];

تظل الأحداث تعمل

تؤدي الأحداث الصادرة من القالب الخاص بالمكوّن (مثل النقرات وحقول الإدخال) إلى وضعه تلقائيًا ضمن المكوّنات المطلوب التحقق منها، لذا تعمل التفاعلية المحلية دون تعليمات برمجية إضافية.

<button (click)="count.set(count() + 1)">+</button>

أنبوب async

يستدعي أنبوب async الدالة markForCheck() عند إصدار observable لقيمة، مما يجعل OnPush يعمل بسلاسة مع التدفقات.

<p>{{ data$ | async }}</p>

markForCheck

عند تحديث الحالة خارج المحفزات المعتادة، استدعِ markForCheck() لجدولة المكوّن (وأسلافه) للدورة التالية.

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

Signals وOnPush

تتكامل Signals مع OnPush: تؤدي قراءة signal في القالب إلى تسجيل اعتماد، ويؤدي تحديثها تلقائيًا إلى وضع المكوّن ضمن المكوّنات المطلوب التحقق منها، من دون الحاجة إلى استدعاءات يدوية.

count = signal(0);
increment() { this.count.update(c => c + 1); }

انتشار OnPush

عند وضع علامة على المكوّن، تتم الإشارة إليه وإلى جميع أسلافه وصولًا إلى الجذر، لكي يخضع المسار للتحقق. أما المكونات الفرعية فتحقَّق بالطريقة المعتادة تحته.

أفضل ممارسة

اجعل OnPush الإعداد الافتراضي للمكونات الجديدة. وبدمجه مع Signals أو المدخلات غير القابلة للتغيير، ينخفض العمل غير الضروري بدرجة كبيرة.

تحقق سريع

اختبر مدى فهمك لـ OnPush.

مراجعة

تعلّمت أن ChangeDetectionStrategy.OnPush يتخطى عمليات التحقق ما لم يتغيّر مرجع إدخال، أو يقع حدث في القالب، أو يصدر أنبوب async قيمة، أو تستدعي markForCheck(). ويعمل بأفضل صورة مع البيانات غير القابلة للتغيير وSignals.

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

هل درس «اكتشاف التغييرات باستخدام OnPush» مجاني؟

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

ماذا ستتعلم في «اكتشاف التغييرات باستخدام OnPush»؟

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

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

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

كم من الوقت يستغرق درس «اكتشاف التغييرات باستخدام OnPush»؟

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

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

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

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

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