इष्टतम प्रदर्शन के लिए जेएसएक्स प्रॉप्स में एरो फ़ंक्शंस और बाइंड से बचें

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

कचरा संग्रहण:

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

• रीरेंडरिंग पर इनलाइन हैंडलर का प्रभाव
विचार करें ये उदाहरण:
• उदाहरण 1: इनलाइन के बिना प्योरकंपोनेंट हैंडलर

क्लास बटन React.PureComponent का विस्तार करता है { प्रदान करना() { const { onClick } = this.props; कंसोल.लॉग('रेंडर बटन'); वापसी क्लिक करेंबटन>; } }इस कोड में, बटन घटक केवल तभी पुन: प्रस्तुत होता है जब इसके प्रॉप्स बदलते हैं, जैसा कि PureComponent के लिए अपेक्षित है।

उदाहरण 2: इनलाइन हैंडलर के साथ PureComponent

const बटन = (प्रॉप्स) => { कंसोल.लॉग('रेंडर बटन'); वापसी props.onClick()}>क्लिक करेंबटन>; };

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

सर्वोत्तम अभ्यास

इन प्रदर्शन समस्याओं से बचने के लिए, निम्नलिखित सर्वोत्तम प्रथाओं का पालन करने की अनुशंसा की जाती है:

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

जेएसएक्स के बाहर अपने ईवेंट हैंडलर को परिभाषित करें:

एरो फ़ंक्शन निकालें या विधियों को अलग-अलग वेरिएबल में बाइंड करें घोषणाएं।

इस बाइंडिंग का उपयोग करें:

क्लास घटकों के लिए, कंस्ट्रक्टर में ईवेंट हैंडलर को इससे बांधें।

उच्च-क्रम फ़ंक्शन का उपयोग करें:
• विचार करें JSX में अधिक कुशल ईवेंट हैंडलिंग के लिए मैप या बाइंडएक्शन क्रिएटर्स जैसे उच्च-क्रम फ़ंक्शन का उपयोग करना।