प्रतिक्रिया: स्वयं को अपडेट करने का सबसे अच्छा तरीका, लेकिन बच्चों को अपडेट करने से रोकें?

Question

मैं ड्रैग-एंड-ड्रॉप कार्यान्वयन (स्क्रैच से, डीएनडी लाइब्रेरी का उपयोग नहीं कर रहा) पर काम कर रहा हूं, और ड्रैग के दौरान अनावश्यक अपडेट की संख्या को सीमित करना चाहता था।

"क्लोन" खींचना (जो आमतौर पर मूल तत्व की एक प्रति है, लेकिन एक मनमानी प्लेसहोल्डर हो सकता है) एक कंटेनर घटक ("क्लोनटेनर") पर एक राज्य को अद्यतन करके और एक ट्रांसफॉर्म लागू करने के लिए इसका उपयोग करके हासिल किया जाता है । हालांकि, इस कदम के दौरान पूरे उपट्री को अद्यतन करने का कोई मतलब नहीं है, क्योंकि केवल परिवर्तन कंटेनर के तार हैं।

यहाँ कि करने के लिए अपने समाधान है:

const ClonetainerRenderShield = React.createClass({ 
    shouldComponentUpdate: function (newProps) { 
     return newProps.shouldUpdate; 
    }, 
    render: function() { 
     return this.props.children; // Simple pass-through 
    } 
}); 

const Clonetainer = React.createClass({ 
    componentWillReceiveProps: function (newProps) { 
     // OR in any further properties that may indicate a move, versus a child update 
     this.isMoveEvent = this.props.offset !== newProps.offset; 
    }, 
    render: function() { 
     const style = { transform: `translate(${this.props.offset.left}px,${this.props.offset.top}px)` }; 
     return <div className="clonetainer-div" style={style}> 
      <ClonetainerRenderShield shouldUpdate={ !this.isMoveEvent }> 
       { this.props.children } 
      </ClonetainerRenderShield> 
     </div>; 
    } 
}); 

(मैं DND प्रणाली के बाकी हिस्सों पर विवरण में नहीं जाना होगा, सिवाय कहने के लिए एक नदी के ऊपर घटक से है कि माउस घटनाओं के लिए ऑफसेट परम फ़ीड Clonetainer।)

समाधान मैं अद्यतन रोकने के साथ आया था निर्धारित करता है कि Clonetainer एक चाल या किसी अन्य कारण की वजह से अद्यतन करने के लिए शुरू हो रहा था (और this.isMoveEvent तदनुसार की स्थापना), तो Clonetainer और जो घटक shimming शामिल बच्चों को एक कंसोनेंट अपडेट के आधार पर कुछ भी नहीं मिला है एक पारित प्रोप (shouldUpdate)।

यह काम करता है। मैंने इसे इस तरह से परीक्षण किया है जो दिखाता है कि यह अपडेट करना चाहिए और इसे अपडेट नहीं करना चाहिए, लेकिन यह डाउनहिल बहने से अपडेट को अवरुद्ध करने के लिए वहां एक अलग शिम घटक रखने के लिए ओवरकिल जैसा लगता है। क्या यह इंगित करने का कोई तरीका है कि बच्चे के घटक को render में अपने पिछले राज्य से अद्यतन नहीं किया जाना चाहिए, बिना बच्चे के घटक को shouldComponentUpdate तर्क शामिल करने की आवश्यकता के बिना?

Answer 1

Clonetainer घटक में componentWillReceivePropsshouldComponentUpdate को बदलने और मध्य व्यक्ति को काटने में सक्षम होना चाहिए। shouldComponentUpdate दो पैरामीटर लेता है, (object nextProps, object nextState) जिसे आप this.state और this.props की तुलना करने के लिए उपयोग कर सकते हैं। वापस लौटने से फिर से प्रस्तुत किया जाएगा।

const Clonetainer = React.createClass({ 
    shouldComponentUpdate: function (nextProps, nextState) { 
     // OR in any further properties that may indicate a move, versus a child update 
     this.props.offset !== nextProps.offset; 
    }, 
    render: function() { 
     const style = { transform: `translate(${this.props.offset.left}px,${this.props.offset.top}px)` }; 
     return <div className="clonetainer-div" style={style}> 
      { this.props.children } 
     </div>; 
    } 
});