एक वरिष्ठ डेवलपर के रूप में, आपसे रिएक्ट में इवेंट हैंडलिंग की गहरी समझ होने की उम्मीद की जाती है। इसमें न केवल मूल बातें जानना शामिल है बल्कि कुशल, रखरखाव योग्य और स्केलेबल एप्लिकेशन बनाने के लिए उन्नत तकनीकों में महारत हासिल करना भी शामिल है। यह आलेख रिएक्ट में इवेंट हैंडलिंग की जटिलताओं को शामिल करता है, जिसमें इवेंट हैंडलर जोड़ना, सिंथेटिक इवेंट को समझना, इवेंट हैंडलर को तर्क पारित करना, कस्टम इवेंट बनाना और इवेंट डेलिगेशन का लाभ उठाना शामिल है।

घटना से निपटना

JSX में इवेंट हैंडलर जोड़ना

जेएसएक्स में इवेंट हैंडलर जोड़ना सीधा और नियमित HTML में इवेंट को संभालने के समान है, लेकिन रिएक्ट की अनूठी वास्तुकला के कारण कुछ महत्वपूर्ण अंतर हैं।

ईवेंट हैंडलर जोड़ने का उदाहरण:

import React from 'react';

const handleClick = () => {
  console.log('Button clicked!');
};

const App = () => {
  return (
    

      Click Me
    
  );
};

export default App;

इस उदाहरण में, जब भी बटन क्लिक किया जाता है तो हैंडलक्लिक फ़ंक्शन को कॉल किया जाता है। JSX में ऑनक्लिक विशेषता का उपयोग इवेंट हैंडलर को निर्दिष्ट करने के लिए किया जाता है।

सिंथेटिक घटनाएँ

रिएक्ट घटनाओं को संभालने के लिए सिंथेटिक इवेंट नामक एक प्रणाली का उपयोग करता है। सिंथेटिक ईवेंट ब्राउज़र के मूल ईवेंट सिस्टम के चारों ओर एक क्रॉस-ब्राउज़र आवरण हैं। यह सुनिश्चित करता है कि ईवेंट एक एकीकृत एपीआई प्रदान करते हुए विभिन्न ब्राउज़रों में लगातार व्यवहार करते हैं।

एक सिंथेटिक घटना का उदाहरण:

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    

      
    
  );
};

export default App;

इस उदाहरण में, हैंडलइनपुटचेंज फ़ंक्शन जब भी इनपुट फ़ील्ड बदलता है तो उसका मान लॉग करता है। इवेंट पैरामीटर एक सिंथेटिक इवेंट है जो सभी ब्राउज़रों में लगातार इवेंट गुण प्रदान करता है।

इवेंट हैंडलर्स को तर्क पारित करना

इवेंट हैंडलर को तर्क पास करना एक एरो फ़ंक्शन या बाइंड विधि का उपयोग करके किया जा सकता है, जो इवेंट को अधिक लचीले तरीके से संभालने के लिए महत्वपूर्ण है।

तीर फ़ंक्शन का उपयोग करने वाला उदाहरण:

import React from 'react';

const handleClick = (message) => {
  console.log(message);
};

const App = () => {
  return (
    

       handleClick('Button clicked!')}>Click Me
    
  );
};

export default App;

बाइंड विधि का उपयोग करने वाला उदाहरण:

import React from 'react';

const handleClick = (message) => {
  console.log(message);
};

const App = () => {
  return (
    

      Click Me
    
  );
};

export default App;

दोनों विधियां आपको इवेंट हैंडलिंग में लचीलापन प्रदान करते हुए हैंडलक्लिक फ़ंक्शन में अतिरिक्त तर्क पारित करने की अनुमति देती हैं।

कस्टम इवेंट हैंडलिंग

कस्टम ईवेंट बनाना

रिएक्ट में कस्टम ईवेंट बनाना अधिक जटिल इंटरैक्शन के लिए आवश्यक है जो मानक ईवेंट द्वारा कवर नहीं किए जाते हैं। कस्टम इवेंट कस्टमइवेंट कंस्ट्रक्टर और डिस्पैचइवेंट विधि का उपयोग करके बनाए और भेजे जा सकते हैं।

कस्टम ईवेंट बनाने और भेजने का उदाहरण:

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      console.log(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    
      Trigger Custom Event
    
  );
};

export default CustomEventComponent;

इस उदाहरण में, बटन क्लिक करने पर कस्टमइवेंट नाम का एक कस्टम इवेंट बनाया और भेजा जाता है। इवेंट हैंडलर कस्टम इवेंट को सुनता है और इवेंट के विवरण संदेश को लॉग करता है।

प्रतिक्रिया में इवेंट प्रतिनिधिमंडल

इवेंट डेलिगेशन एक ऐसी तकनीक है जहां एक एकल इवेंट श्रोता का उपयोग कई तत्वों के लिए इवेंट प्रबंधित करने के लिए किया जाता है। यह सूचियों या तालिकाओं में घटनाओं को कुशलतापूर्वक प्रबंधित करने के लिए विशेष रूप से उपयोगी है।

इवेंट प्रतिनिधिमंडल का उदाहरण:

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    

      1
      2
      3
    
  );
};

export default App;

इस उदाहरण में, div तत्व पर एक एकल ईवेंट हैंडलर सभी बटनों के लिए क्लिक ईवेंट प्रबंधित करता है। इवेंट हैंडलर यह निर्धारित करने के लिए इवेंट.लक्ष्य की जांच करता है कि कौन सा बटन क्लिक किया गया था और तदनुसार एक संदेश लॉग करता है।

रिएक्ट में इवेंट हैंडलिंग के लिए सर्वोत्तम अभ्यास

1. JSX में इनलाइन फ़ंक्शंस बनाने से बचें: रेंडर विधि के अंदर नए फ़ंक्शन बनाने से अनावश्यक री-रेंडर और प्रदर्शन संबंधी समस्याएं हो सकती हैं। इसके बजाय, इवेंट हैंडलर को क्लास विधियों के रूप में परिभाषित करें या हुक का उपयोग करें।

   const App = () => {
     const handleClick = () => {
       console.log('Button clicked!');
     };

     return (
       

         Click Me
       
     );
   };

1. डिफ़ॉल्ट व्यवहार को रोकें और प्रसार रोकें: डिफ़ॉल्ट व्यवहार को रोकने के लिए इवेंट.preventDefault() का उपयोग करें और आवश्यक होने पर इवेंट प्रसार को रोकने के लिए इवेंट.स्टॉपप्रॉपैगेशन() का उपयोग करें।

   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return 

1. इवेंट श्रोताओं को साफ करें: इवेंट श्रोताओं को सीधे DOM तत्वों में जोड़ते समय, मेमोरी लीक से बचने के लिए उन्हें साफ करना सुनिश्चित करें।

   useEffect(() => {
     const handleResize = () => {
       console.log('Window resized');
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);

1. डिबाउंस या थ्रॉटल हाई-फ़्रीक्वेंसी इवेंट: प्रदर्शन को बेहतर बनाने के लिए स्क्रॉलिंग या आकार बदलने जैसी उच्च-फ़्रीक्वेंसी इवेंट के लिए डिबाउंस या थ्रॉटल तकनीकों का उपयोग करें।

   const debounce = (func, delay) => {
     let timeoutId;
     return (...args) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         func.apply(null, args);
       }, delay);
     };
   };

   useEffect(() => {
     const handleScroll = debounce(() => {
       console.log('Scroll event');
     }, 300);

     window.addEventListener('scroll', handleScroll);

     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);

1. इवेंट डेलिगेशन का बुद्धिमानी से उपयोग करें: उन तत्वों के लिए इवेंट डेलिगेशन का लाभ उठाएं जो DOM में गतिशील रूप से जोड़े या हटाए गए हैं, जैसे आइटमों की सूची।

   const List = () => {
     const handleClick = (event) => {
       if (event.target.tagName === 'LI') {
         console.log(`Item ${event.target.textContent} clicked!`);
       }
     };

     return (
       

• Item 1
• Item 2
• Item 3

निष्कर्ष

इंटरैक्टिव और उच्च-प्रदर्शन एप्लिकेशन बनाने के लिए रिएक्ट में घटनाओं को कुशलतापूर्वक संभालना महत्वपूर्ण है। इवेंट हैंडलर जोड़ने, सिंथेटिक इवेंट का उपयोग करने, इवेंट हैंडलर को तर्क पारित करने, कस्टम इवेंट बनाने और इवेंट डेलिगेशन का लाभ उठाने की तकनीकों में महारत हासिल करके, आप मजबूत और स्केलेबल एप्लिकेशन बना सकते हैं। सर्वोत्तम प्रथाओं को लागू करने से यह सुनिश्चित होता है कि आपका कोड जटिलता बढ़ने के साथ-साथ रखरखाव योग्य और क्रियाशील बना रहता है। एक वरिष्ठ डेवलपर के रूप में, इन उन्नत तकनीकों का उपयोग करने की आपकी क्षमता आपकी परियोजनाओं की सफलता और आपकी टीम की प्रभावशीलता में महत्वपूर्ण योगदान देगी।