Angular Academy · درس

تنظيف التأثيرات ودورة الحياة

نظّفوا الموارد داخل التأثيرات

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

أهمية التنظيف

يمكن للتأثير أن يبدأ موارد مثل المؤقتات والاشتراكات ومستمعي الأحداث. وفي كل مرة يُعاد فيها تشغيل التأثير، يجب تفكيك المورد القديم أولًا — وإلا تسرّبت المؤقتات ومستمعو الأحداث. يوفر Angular خطاف onCleanup لهذا الغرض.

دالة الاستدعاء onCleanup

تتلقى دالة التأثير دالة onCleanup. سجّل معها دالة استدعاء لإزالة الموارد؛ وسيستدعيها Angular قبل التشغيل التالي وعند التدمير.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

يُنفَّذ التنظيف قبل كل إعادة تشغيل

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

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

تنظيف مستمعي الأحداث

يجب إزالة مستمعي DOM المضافين داخل تأثير أثناء التنظيف لتجنب معالجات مكررة وتسريبات.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

التنظيف مع الاشتراكات

إذا اشترك تأثير في Observable، فألغِ الاشتراك أثناء التنظيف. (غالبًا ما ستستخدم أدوات أخرى، لكن هذا يوضح النمط.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

التنظيف عند التدمير

عند تدمير المكوّن الذي يملك التأثير، ينفذ Angular عملية التنظيف النهائية تلقائيًا، ثم يدمّر التأثير. ولا تبقى أي مؤقتات متسرّبة.

الترتيب: التنظيف ثم الجسم

في المرة الأولى التي يُشغَّل فيها التأثير لا يوجد شيء لتنظيفه. وبدءًا من التشغيل الثاني، يكون التسلسل دائمًا: التنظيف -> الجسم.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

تجنب العمل المكثف من دون تنظيف

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

الخيار manualCleanup

بالنسبة إلى التأثيرات التي تُنشأ خارج مكوّن (مثلًا في خدمة جذرية تستمر إلى الأبد)، يمكنك استخدام الخيار manualCleanup، ثم استدعاء ref.destroy() بنفسك عندما يكون ذلك مناسبًا.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef كبديل

للتنظيف غير المرتبط بالتأثير، يمكنك حقن DestroyRef وتسجيل دوال الاستدعاء باستخدام onDestroy. أما داخل التأثيرات، ففضّل onCleanup للتنظيف في كل تشغيل.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

جمع الأجزاء معًا

تأثير مزامنة مع تأخير: يلغي كل تغير في القيمة المؤقت السابق ويجدول عملية حفظ جديدة.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

تحقق سريع

اختبر مدى فهمك لتنظيف التأثيرات.

مراجعة: تنظيف التأثير ودورة الحياة

استخدم معامل onCleanup لتفكيك الموارد التي بدأها التأثير.

يُنفَّذ التنظيف قبل كل إعادة تشغيل وعند التدمير.
نظّف دائمًا المؤقتات ومستمعي الأحداث والاشتراكات.
استخدم manualCleanup للتأثيرات طويلة العمر، وDestroyRef للتنظيف العام.

التالي: linkedSignal والأنماط المتقدمة.

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

هل درس «تنظيف التأثيرات ودورة الحياة» مجاني؟

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

ماذا ستتعلم في «تنظيف التأثيرات ودورة الحياة»؟

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

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

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

كم من الوقت يستغرق درس «تنظيف التأثيرات ودورة الحياة»؟

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

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

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

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

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