प्रतिक्रिया में पुन: प्रस्तुत करने के लिए प्रोप को अपरिवर्तनीय कैसे बनाया जाए?

Question

मैं react.js का उपयोग कर एक छोटा ऐप बना रहा हूं। मैं खाते में 'प्रदर्शन' को अत्यधिक लेता हूं।

तो मेरे पास "स्पिनर" नामक एक साधारण बाल घटक है। मेरा लक्ष्य यह सुनिश्चित करना है कि यह घटक कभी भी पुनः प्रस्तुत न करे।

यहाँ मेरी घटक है:

import React, {PureComponent} from 'react'; 

export default class Spinner extends PureComponent { 

render() { 
    return (
     <div className="spinner"> 
      <div className="bounce1"></div> 
      <div className="bounce2"></div> 
      <div className="bounce3"></div> 
     </div> 
    ) 
} 

} 

के साथ फिर से प्रतिपादन के समय में 'प्रतिक्रिया-एडऑन-पर्फ़', घटक हमेशा प्रदर्शित हो रहा है, मैं PureComponent उपयोग कर रहा हूँ क्योंकि मुझे लगता है कि घटक चाहते रेंडर करने के लिए केवल एक बार, मैंने पढ़ा कि मैं अपरिवर्तनीय प्रोप का उपयोग कर सकता हूं लेकिन मुझे नहीं पता कि यह कैसे संभव है।

यदि मैं यह करने के लिए की तरह कुछ कर:

componentDidMount() { 
    this.renderState = false; 
} 

shouldComponentUpdate(nextProps, nextState) { 
    return (this.renderState === undefined) ? true : this.renderState; 
} 

यह केवल एक बार प्रतिपादन है, लेकिन मेरा मानना ​​है कि एक बेहतर तरीका नहीं है।

मैं फिर से प्रस्तुत करने से कैसे बचूं? या शायद मैं एक अपरिवर्तनीय प्रोप कैसे बना सकता हूं?

Answer 1

आपको घटकShouldUpdate के लिए अतिरिक्त तर्क की आवश्यकता नहीं है, क्योंकि आप नहीं चाहते हैं कि आपका घटक कभी भी पुनः प्रस्तुत करें।

जोड़ा जा रहा है केवल इस rerender करने के लिए घटक को रोकने के लिए पर्याप्त होना चाहिए:

shouldComponentUpdate(nextProps, nextState) { 
    return false 
} 

Answer 2

राज्यविहीन घटक है कि रंगमंच की सामग्री की जरूरत नहीं है, हम एक Functional (स्टेटलेस) घटक का एक संयोजन है, और कोलाहल के React constant elements transformer लिए उपयोग कर सकते हैं घटक निर्माण को अनुकूलित करें, और पूरी तरह से पुनर्विक्रेताओं को रोकें।

1. अपने निर्माण प्रणाली में React constant elements transformer जोड़ें। docs के अनुसार ट्रांसफार्मर देगा: subtrees कि पूरी तरह से स्थिर रहे हैं के लिए शीर्ष स्तर पर

   हॉइस्ट तत्व निर्माण, जो React.createElement और जिसके परिणामस्वरूप आवंटन करने के लिए कॉल कम कर देता है। सबसे महत्वपूर्ण बात यह है कि यह प्रतिक्रिया देता है कि उपट्री नहीं बदली है इसलिए रीकसीलिंग करते समय प्रतिक्रिया पूरी तरह से इसे छोड़ सकती है।

2. स्पिनर को एक स्टेटलेस घटक में बदलें।

   const Spinner =() => (
       <div className="spinner"> 
       <div className="bounce1"></div> 
       <div className="bounce2"></div> 
       <div className="bounce3"></div> 
       </div> 
   ); 
   
   export default Spinner; 
   

Answer 3

आप अपने रंगमंच की सामग्री अपरिवर्तनीय Immutable JS का उपयोग कर Lists में अपने सरणी रंगमंच की सामग्री को बदलने और आपत्ति रंगमंच की सामग्री int Maps करने से प्रतिक्रिया में बना सकते हैं। - इस नहीं है

shouldComponentUpdate(nextProps) => { 
    this.props.complexObjectAsMap === nextProps.complexObjectAsMap 
} 

लेकिन चूंकि अपने घटक किसी भी सहारा नहीं है: इस पुस्तकालय के साथ आप (बजाय समानता के लिए कुंजियों/मूल्यों के माध्यम से जा के) सरणियों/वस्तुओं की समानता की जाँच करने के सरल जांच उपयोग कर सकते हैं सही सवाल देखो। आपके मामले में मैं Ori Drori उत्तर के साथ जाऊंगा।