अनुकूलन समारोह आंशिक आवेदन के साथ प्रतिपादन प्रतिक्रिया

Question

प्रतिक्रिया घटक ऑब्जेक्ट संदर्भ समानता के साथ रंगमंच की सामग्री की तुलना, और जब आप आंशिक रूप से एक समारोह के लागू होते हैं, आप एक अलग संदर्भ जो एक घटक प्रतिक्रिया एक को गति प्रदान करने का कारण बनता है के साथ एक नया समारोह मिलता है हर बार फिर से प्रस्तुत करना ।

क्या किसी को भी इस समस्या का सामना करना पड़ा है?

मैं एक समारोह है कि कोई विशिष्ट टैब में एक घटक renders है। और प्रोप में से एक this.setTab.bind(this, tab) है जो हर बार एक नया फ़ंक्शन देता है। अगर वहाँ अचल स्थिति सहायक किसी तरह का है जो इस सीमित मान के आधार पर बराबर होने की अनुमति देता ...

Answer 1

था अपने render समारोह this.props और this.state से निर्भर करता है, तो केवल डेटा पर यह वास्तव में शांत हो सकता है, आप लागू कर सकते हैं shouldComponentUpdate method पुराने और नए प्रोप और राज्य की तुलना करने के लिए इस तरह अनावश्यक पुन: प्रस्तुत करने से रोकने के लिए वास्तव में हैंडलर नहीं बदला गया था, इस पर प्रतिक्रिया दे रही है।

सावधानी के एक शब्द के साथ इसे लें हालांकि: यदि shouldComponentUpdate में आपका तर्क गलत है (तो यह false देता है जब वास्तव में कुछ बदल जाता है), आपका घटक अपडेट करना बंद कर देगा। इन बग को बाद में ढूंढना मुश्किल है, इसलिए सावधान रहें।

Answer 2

मैं eslint प्लगइन डॉक्स "jsx-no-bind" से सीधे इस खींच कर रहा हूँ (प्रयोग प्रोफाइलर पता लगाने के लिए अगर आप वास्तव में इस विशिष्ट प्रदर्शन लाभ की जरूरत है।), और यह एक संभव समाधान का उल्लेख संख्या को कम करने:

---

बाँध का उपयोग आम तौर पर में प्रस्तुत करना है जब एक सूची प्रदान करने, सूची आइटम प्रति एक अलग कॉलबैक है:

var List = React.createClass({ 
    render() { 
    return (
     <ul> 
     {this.props.items.map(item => 
      <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}> 
      ... 
      </li> 
     )} 
     </ul> 
    ); 
    } 
}); 

के बजाय इसे इस तरह कर रही है, अपने स्वयं के घटक में पुनरावृत्त भाग खींच:

var List = React.createClass({ 
    render() { 
    return (
     <ul> 
     {this.props.items.map(item => 
      <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} /> 
     )} 
     </ul> 
    ); 
    } 
}); 

var ListItem = React.createClass({ 
    render() { 
    return (
     <li onClick={this._onClick}> 
     ... 
     </li> 
    ); 
    }, 
    _onClick() { 
    this.props.onItemClick(this.props.item.id); 
    } 
}); 

यह प्रतिपादन तेज करेगा, क्योंकि यह प्रत्येक प्रस्तुतिकरण पर नए कार्यों (बाइंड कॉल के माध्यम से) बनाने की आवश्यकता से बचाता है।