यदि किसी बच्चे के घटक के लिए प्रोप अपरिवर्तित हैं, तो क्या प्रतिक्रिया अभी भी पुनः प्रस्तुत करती है?

Question

मान लीजिए मैं में माता-पिता और बच्चे के घटकों के निम्नलिखित जोड़ी है प्रतिक्रिया:

var ChildComponent = React.createClass({ 
    getDefaultProps: function(){ 
     return { 
      a: 'a', 
      b: 'b', 
      c: 'c' 
     } 
    }, 

    render: function() { 
     return (
      /* jshint ignore:start */ 
      <div className={'child' + (this.props.b ? ' modifierClass' : '')} something={this.props.a}> 
       {this.props.c} 
      </div> 
      /* jshint ignore:end */ 
     ); 
    } 
}); 


var ParentComponent = React.createClass({ 
    componentDidMount: function(){ 
     //After 10 seconds, change a property that DOES NOT affect the child component, and force an update 
     setTimeout(function(){ 
      this.setState({foo: 'quux'}); 
      this.forceUpdate(); 
     }.bind(this), 10000); 
    } 

    getInitialState: function(){ 
     return { 
      foo: 'bar', 
      a: 1, 
      b: 2, 
      c: 3 
     } 
    }, 

    render: function() { 
     return (
      /* jshint ignore:start */ 
      <div className="parent"> 
       <ChildComponent a={this.props.a} b={this.props.b} c={this.props.c}/> 
      </div> 
      /* jshint ignore:end */ 
     ); 
    } 
}); 


React.render(
    /* jshint ignore:start */ 
    <ParentComponent />, 
    /* jshint ignore:end */ 
    document.getElementsByTagName('body')[0] 
); 

जब मैं कर forceUpdate, के बाद से रंगमंच की सामग्री है कि ChildComponent बदल करने के लिए पारित किए गए, में से कोई भी करने की कोशिश प्रतिक्रिया करेंगे इसे फिर से प्रस्तुत करना ? क्या होगा यदि मेरे पास ऐसे 1000 बच्चे हैं, आदि?

मुझे जो चिंता है, वह एक ऐसी स्थिति है जहां मेरे पास बहुत गहरा ChildComponent है जो वंश घटकों का एक बड़ा विशाल पेड़ है, लेकिन मैं केवल ParentComponent पर कुछ अपेक्षाकृत कॉस्मेटिक बदलावों को लागू करना चाहता हूं। क्या बच्चों को फिर से प्रस्तुत करने की कोशिश किए बिना केवल माता-पिता को अद्यतन करने के लिए प्रतिक्रिया प्राप्त करने का कोई तरीका है?

Answer 1

जब प्रतिक्रिया ParentComponent पुन: प्रस्तुत करता है तो यह स्वचालित रूप से ChildComponent फिर से प्रस्तुत करेगा। ChildComponent में shouldComponentUpdate को लागू करने का एकमात्र तरीका है। आपको this.props.a, this.props.b और this.props.c और ChildComponents अपने राज्य को फिर से प्रस्तुत करने का निर्णय लेने की तुलना करनी चाहिए या नहीं। यदि आप अपरिवर्तनीय डेटा का उपयोग कर रहे हैं तो आप पिछले और अगले राज्य की तुलना कर सकते हैं और सख्त समानता === का उपयोग कर प्रोप कर सकते हैं।

1. आप न forceUpdate जब आप setState करने की जरूरत है अपने कोड के साथ ध्यान देने लायक कुछ बात कर रहे हैं। प्रतिक्रिया आपके लिए स्वचालित रूप से करता है।

2. आप शायद मतलब:

   <ChildComponent a={this.props.a} b={this.props.b} c={this.props.c}/>