دليل التعامل مع الأحداث في React

هل يتم إعادة تحميل صفحة الويب بالكامل عند النقر على زر؟ هل يفشل مربع الإدخال في تحديث الحالة (state) أثناء الكتابة؟ قد تواجه هذه المشكلات إذا لم تتعامل مع الأحداث بشكل صحيح في React.

يعني التعامل مع الأحداث التقاط إجراءات المستخدم مثل النقرات (clicks)، أو عمليات الإرسال (submits)، أو التغييرات (changes) والاستجابة لها. يستخدم React نظامًا يسمى SyntheticEvent؛ وهذا يضمن عمل الكود الخاص بك بنفس الطريقة عبر جميع المتصفحات مثل Chrome وSafari وFirefox.

الاختلافات الرئيسية بين أحداث HTML وأحداث React:

  • التسمية: استخدم camelCase في React. استخدم onClick بدلاً من onclick.
  • المعالجات (Handlers): قم بتمرير مرجع دالة (function reference) في React. استخدم الأقواس المتعرجة {} بدلاً من النصوص.
  • المنع: استدعِ دائماً event.preventDefault() لإيقاف سلوك المتصفح الافتراضي.

كيف يتعامل React مع الأحداث:

لا يقوم React بإرفاق مستمعين (listeners) بكل عقدة (node) على حدة، بل يستخدم تقنية تفويض الأحداث (Event Delegation). حيث يقوم بإرفاق مستمع واحد بالعنصر الجذر (root element)، مما يوفر الذاكرة ويحسن الأداء.

الأنماط الشائعة للاستخدام:

  • عداد النقرات (Click Counter): استخدم دالة لتحديث الحالة (state) عندما ينقر المستخدم على زر.
  • التعامل مع النماذج (Form Handling): استخدم event.target.name و event.target.value لتحديث حقول إدخال متعددة باستخدام دالة واحدة. استخدم دائماً event.preventDefault() عند إرسال النموذج لمنع إعادة تحميل الصفحة.
  • تمرير الوسائط (Passing Arguments): إذا كنت بحاجة إلى تمرير معرف (ID) إلى دالة، فاستخدم دالة سهمية (arrow function). اكتب onClick={() => handleDelete(id)}. لا تكتب onClick={handleDelete(id)} لأنها ستعمل فوراً أثناء عملية الـ render.

تجنب هذه الأخطاء:

  • الحلقات اللانهائية (Infinite Loops): لا تستدعِ دالة مباشرة داخل سمة onClick. يؤدي هذا إلى إطلاق تحديث للحالة أثناء الـ render، مما يتسبب في عملية render أخرى.
  • أحداث غير معرفة (Undefined Events): قم دائماً بتضمين معامل الحدث (event parameter) في تعريف الدالة الخاصة بك إذا كنت بحاجة إلى استدعاء preventDefault().
  • تسريبات الذاكرة (Memory Leaks): إذا قمت بإضافة مستمعين يدويين مثل window.addEventListener داخل خطاف useEffect ، فقم دائماً بإزالتهم في دالة التنظيف (cleanup function).

أفضل الممارسات للأداء:

  • تجنب إنشاء دوال جديدة داخل حلقة .map() إذا كانت قائمتك ضخمة.
  • استخدم خطاف useCallback عند تمرير المعالجات (handlers) إلى المكونات الفرعية (child components).
  • قم بتنظيف مستمعي الأحداث المخصصة للحفاظ على سرعة تطبيقك.

إتقان الأحداث هو المفتاح لبناء تطبيقات React تفاعلية.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69