JSX प्रॉप्स में एरो फ़ंक्शंस या बाइंड का उपयोग करना क्यों वर्जित है

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

पुराने फ़ंक्शन को छोड़ दिया गया है, जिससे कचरा संग्रहण शुरू हो गया है।

कई तत्वों के निरंतर प्रतिपादन के परिणामस्वरूप प्रदर्शन में गड़बड़ी हो सकती है।

PureComponents पर निर्भर घटक या suchComponentUpdate बदलते एरो फ़ंक्शन प्रोप के कारण अभी भी पुन: प्रस्तुतीकरण को ट्रिगर करता है। () => this.handleDelete(tile)}

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

इन नुकसानों से बचने के लिए, का उपयोग करें निम्नलिखित सर्वोत्तम अभ्यास:

ईवेंट हैंडलर को कंस्ट्रक्टर में बाइंड करें:

onClick={() => this.handleDelete(tile)}

कंस्ट्रक्टर(प्रॉप्स) { सुपर(प्रॉप्स); this.handleDelete = this.handleDelete.bind(this); }

रेंडर विधि के बाहर एक एरो फ़ंक्शन बनाएं:

const HandleDelete = टाइल => { // डिलीट लॉजिक को हैंडल करें };

• अतिरिक्त नोट:

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