React நிகழ்வுகளைக் கையாளுதல் வழிகாட்டி
நீங்கள் ஒரு பொத்தானைக் கிளிக் செய்யும்போது உங்கள் முழு வலைப்பக்கமும் மீண்டும் ஏற்றப்படுகிறதா (reload)? நீங்கள் தட்டச்சு செய்யும்போது உங்கள் input box நிலையை (state) புதுப்பிக்கத் தவறுகிறதா? React-இல் நிகழ்வுகளைச் சரியாகக் கையாளவில்லை என்றால் நீங்கள் இத்தகைய சிக்கல்களைச் சந்திக்கலாம்.
நிகழ்வுகளைக் கையாளுதல் (Event handling) என்பது கிளிக் (clicks), சமர்ப்பிப்பு (submits) அல்லது மாற்றங்கள் (changes) போன்ற பயனர் செயல்களைக் கண்டறிந்து அவற்றுக்குத் தகுந்தவாறு செயல்படுவதைக் குறிக்கும். React, SyntheticEvent எனப்படும் ஒரு அமைப்பைப் பயன்படுத்துகிறது. இது Chrome, Safari மற்றும் Firefox போன்ற அனைத்து உலாவிகளிலும் (browsers) உங்கள் குறியீடு ஒரே மாதிரியாகச் செயல்படுவதை உறுதி செய்கிறது.
HTML மற்றும் React நிகழ்வுகளுக்கு இடையிலான முக்கிய வேறுபாடுகள்:
- பெயரிடுதல் (Naming): React-இல் camelCase பயன்படுத்தவும். onclick என்பதற்குப் பதிலாக onClick என்பதைப் பயன்படுத்தவும்.
- கையாளுபவர்கள் (Handlers): React-இல் ஒரு function reference-ஐ அனுப்பவும். Strings-க்கு பதிலாக curly braces-களைப் பயன்படுத்தவும்.
- தடுத்தல் (Prevention): உலாவியின் இயல்பான செயல்பாட்டைத் தடுக்க எப்போதும் event.preventDefault() என்பதை அழைக்கவும்.
React நிகழ்வுகளை எவ்வாறு கையாளுகிறது:
React ஒவ்வொரு தனிப்பட்ட நோடிற்கும் (node) listeners-களை இணைப்பதில்லை. இது Event Delegation முறையைப் பயன்படுத்துகிறது. இது root element-இல் ஒரு ஒற்றை listener-ஐ இணைக்கிறது. இது நினைவகத்தைச் (memory) சேமிப்பதோடு செயல்திறனையும் (performance) மேம்படுத்துகிறது.
பயன்படுத்த வேண்டிய பொதுவான முறைகள்:
- கிளிக் கவுண்டர் (Click Counter): பயனர் ஒரு பொத்தானைக் கிளிக் செய்யும்போது state-ஐப் புதுப்பிக்க ஒரு function-ஐப் பயன்படுத்தவும்.
- படிவக் கையாளுதல் (Form Handling): ஒரே ஒரு function மூலம் பல input fields-களைப் புதுப்பிக்க event.target.name மற்றும் event.target.value ஆகியவற்றைப் பயன்படுத்தவும். பக்கங்கள் மீண்டும் ஏற்ற