React Event Handling Guide

האם כל דף האינטרנט שלכם נטען מחדש כשאתם לוחצים על כפתור? האם תיבת הקלט שלכם לא מצליחה לעדכן את ה-state בזמן שאתם מקלידים? ייתכן שתיתקלו בבעיות הללו אם אינכם מטפלים באירועים בצורה נכונה ב-React.

טיפול באירועים (Event handling) פירושו ללכוד פעולות משתמש כמו לחיצות, שליחות (submits) או שינויים ולהגיב אליהן. React משתמשת במערכת הנקראת SyntheticEvent. זה מבטיח שהקוד שלכם יעבוד באותו אופן בכל הדפדפנים כמו Chrome, Safari, ו-Firefox.

הבדלים מרכזיים בין אירועי HTML ל-React:

  • שמות: השתמשו ב-camelCase ב-React. השתמשו ב-onClick במקום ב-onclick.
  • מטפלים (Handlers): העבירו הפניה לפונקציה ב-React. השתמשו בסוגריים מסולסלים במקום במחרוזות.
  • מניעה: תמיד קראו ל-event.preventDefault() כדי לעצור את התנהגות ברירת המחדל של הדפדפן.

איך React מטפלת באירועים:

React לא מצמידה מאזינים (listeners) לכל צומת (node) בנפרד. היא משתמשת ב-Event Delegation. היא מצמידה מאזין יחיד לאלמנט השורש (root element). זה חוסך בזיכרון ומשפר את הביצועים.

תבניות נפוצות לשימוש:

  • מונה לחיצות (Click Counter): השתמשו בפונקציה כדי לעדכן את ה-state כאשר משתמש לוחץ על כפתור.
  • טיפול בטפסים: השתמשו ב-event.target.name ו-event.target.value כדי לעדכן מספר שדות קלט באמצעות פונקציה אחת. תמיד השתמשו ב-event.preventDefault() בעת שליחת טופס כדי למנוע טעינה מחדש של הדף.
  • העברת ארגומנטים: אם עליכם להעביר ID לפונקציה, השתמשו בפונקציית חץ (arrow function). כתבו onClick={() => handleDelete(id)}. אל תכתבו onClick={handleDelete(id)} מכיוון שהיא תרוץ מיד במהלך ה-render.

הימנעו מהטעויות הללו:

  • לולאות אינסופיות: לעולם אל תקראו לפונקציה ישירות בתוך מאפיין onClick. זה מפעיל עדכון state במהלך ה-render, מה שגורם ל-render נוסף.
  • אירועים לא מוגדרים (Undefined Events): תמיד כללו את הפרמטר event בהגדרת הפונקציה שלכם אם אתם צריכים לקרוא ל-preventDefault().
  • דליפות זיכרון: אם אתם מוסיפים מאזינים ידניים כמו window.addEventListener בתוך hook מסוג useEffect, תמיד הסירו אותם בפונקציית הניקוי (cleanup function).

שיטות עבודה מומלצות לביצועים:

  • הימנעו מיצירת פונקציות חדשות בתוך לולאת .map() אם הרשימה שלכם גדולה מאוד.
  • השתמשו ב-useCallback hook בעת העברת מטפלים (handlers) לרכיבי בן (child components).
  • בצעו ניקוי למאזיני אירועים מותאמים אישית כדי לשמור על האפליקציה מהירה.

שליטה באירועים היא המפתח לבניית אפליקציות React אינטראקטיביות.

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