react-native
रेंडर बेस्ट प्रैक्टिस

परिचय

JSX में कार्य

बेहतर प्रदर्शन के लिए JSX में एरे (लंबो) फ़ंक्शन का उपयोग करने से बचना महत्वपूर्ण है।

जैसा कि https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md पर समझाया गया है:

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

तो अगर इस तरह से jsx कोड ब्लॉक है:

                    <TextInput
                      onChangeValue={  value => this.handleValueChanging(value) }
                    />

या

                    <button onClick={ this.handleClick.bind(this) }></button>

आप इसे बेहतर बना सकते हैं:

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

तथा

                    <button onClick={ this.handleClick }></button>

HandleValueChanging फ़ंक्शन के भीतर सही संदर्भ के लिए आप इसे घटक के निर्माता में लागू कर सकते हैं:

          constructor(){
            this.handleValueChanging = this.handleValueChanging.bind(this)
          }

बंधन में अधिक एक घटक को पारित कर दिया

या आप इस तरह के समाधान का उपयोग कर सकते हैं: https://github.com/andreypopp/autobind-decorator और बस प्रत्येक मेथोस में @autobind डेकोरेटर जोड़ें जिसे आप बाइंड करना चाहते हैं:

        @autobind
        handleValueChanging(newValue)
        {
            //processing event
        }