إزالة مستمعي أحداث النافذة | دوال تنظيف التأثيرات ودورة حياة useEffect

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

ترتبط خصائص مثل onClick بعناصر المكون نفسه، أما الأحداث العامة على مستوى المتصفح — كتغير عرض النافذة resize أو حالة الاتصال بالشبكة أو اختصارات لوحة المفاتيح العامة مثل مفتاح Escape — فتُسجل على كائن window أو document.

عرّف دالة معالجة مسماة داخل التأثير، ومررها إلى window.addEventListener، ثم مرر نفس مرجع الدالة بالضبط إلى window.removeEventListener داخل دالة التنظيف.

الصف 2 كود برمجي

HTML

useEffect(() => {
  function onKey(e) {
    setLastKey(e.key);
  }
  window.addEventListener('keydown', onKey);
  return () => {
    window.removeEventListener('keydown', onKey);
  };
}, []);

جرّب بنفسك

الصف 3 ملاحظة هامة

Cleaning Global Event Listeners إزالة مستمعي أحداث النافذة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (دوال تنظيف التأثيرات ودورة حياة useEffect)