ट्रेस क्यों एक प्रतिक्रिया घटक फिर से प्रतिपादन कर रहा है

Question

क्या डीबग करने के लिए एक व्यवस्थित दृष्टिकोण है जो घटक को प्रतिक्रिया में पुन: प्रस्तुत करने का कारण बन रहा है? मैंने यह देखने के लिए एक सरल console.log() डाला है कि यह कितना समय प्रस्तुत करता है, लेकिन मुझे यह पता लगाने में परेशानी हो रही है कि घटक को मेरे मामले में कई बार i.e (4 बार) प्रस्तुत करने का कारण क्या है। क्या कोई ऐसा उपकरण है जो मौजूद है जो एक समयरेखा और/या सभी घटकों के वृक्ष प्रस्तुत करता है और ऑर्डर करता है?

Answer 1

@jpdelatorre का जवाब सही है। आम तौर पर, प्रतिक्रिया की शक्तियों में से एक यह है कि आप आसानी से कोड को देखकर श्रृंखला का बैक अप ले सकते हैं। React DevTools extension इसके साथ मदद कर सकते हैं।

इसके अलावा, मैं अपने Redux addons catalog के हिस्से के रूप useful tools for visualizing/tracking React component re-rendering की एक सूची है, और मेरे React/Redux links list में React performance monitoring पर लेख की एक संख्या।

Answer 2

यहां कुछ उदाहरण दिए गए हैं कि एक प्रतिक्रिया घटक फिर से प्रस्तुत करेगा।

• जनक घटक rerender
• घटक भीतर this.setState() कॉलिंग। यह निम्नलिखित घटक जीवन चक्र विधियों को ट्रिगर करेगा shouldComponentUpdate>componentWillUpdate>render>componentDidUpdate
• घटक के props में परिवर्तन। यह
• this.forceUpdate बुला जो this.setState

के समान आप को कम से कम कर सकते हैं अपने घटक है (जब वहाँ Redux दुकान में लागू परिवर्तन कर रहे हैं connectreact-redux इस की विधि ट्रिगर) componentWillReceiveProps>shouldComponentUpdate>componentWillUpdate>render>componentDidUpdate ट्रिगर किया जाएगा अपने shouldComponentUpdate के अंदर एक चेक लागू करके पुन: प्रस्तुत करें और false लौटने पर इसकी आवश्यकता नहीं है।

एक और तरीका React.PureComponent या स्टेटलेस घटक का उपयोग करना है। शुद्ध और स्टेटलेस घटक केवल तब ही प्रस्तुत करते हैं जब इसके प्रोप में परिवर्तन होते हैं।

Answer 3

@ jpdelatorre का उत्तर सामान्य कारणों को हाइलाइट करने में बहुत अच्छा है क्यों एक प्रतिक्रिया घटक पुनः प्रस्तुत कर सकता है।

मैं सिर्फ एक उदाहरण में थोड़ा गहराई से गोता लगाने के लिए चाहता था: जब प्रोप बदलते हैं। पुन: प्रस्तुत करने के लिए एक प्रतिक्रिया घटक का कारण बनने में समस्या निवारण एक आम समस्या है, और मेरे अनुभव में इस समस्या को ट्रैक करने में कई प्रस्ताव हैं कि कौन से प्रोप बदल रहे हैं।

जब भी वे नए प्रोप प्राप्त करते हैं तो घटक फिर से प्रस्तुत करते हैं। वे जैसे नए रंगमंच की सामग्री प्राप्त कर सकते हैं:

<MyComponent prop1={currentPosition} prop2={myVariable} />

या यदि MyComponent एक redux दुकान से जुड़ा है:

function mapStateToProps (state) { 
    return { 
    prop3: state.data.get('savedName'), 
    prop4: state.data.get('userCount') 
    } 
} 

कभी भी prop1 का मूल्य, prop2, prop3, या prop4 बदलता है MyComponent फिर से होगा प्रस्तुत करना।4 प्रोप के साथ render ब्लॉक की शुरुआत में console.log(this.props) डाल कर कौन से प्रोप बदल रहे हैं, यह ट्रैक करना बहुत मुश्किल नहीं है। हालांकि अधिक जटिल घटकों और अधिक से अधिक प्रोप के साथ यह विधि अस्थिर है।

componentWillReceiveProps (nextProps) { 
    const changedProps = _.reduce(this.props, function (result, value, key) { 
    return _.isEqual(value, nextProps[key]) 
     ? result 
     : result.concat(key) 
    }, []) 
    console.log('changedProps: ', changedProps) 
} 

मदद अपराधी संदिग्ध फिर से पैदा कर रहा प्रकट कर सकते हैं अपने घटक को यह टुकड़ा जोड़ना:

यहाँ एक उपयोगी दृष्टिकोण (सुविधा के लिए lodash का प्रयोग करके) निर्धारित करने के लिए जो सहारा परिवर्तन एक घटक फिर से प्रस्तुत करने के लिए उत्पन्न कर रहे हैं है -रेंडर, और कई बार यह अनावश्यक डेटा को घटकों में पाइप किए जाने पर शेड लाइट में मदद करता है।