如果子组件的道具不变，React是否仍然重新渲染它？

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进行一些相对美观的更改。有没有办法让React只更新父级，而不尝试重新渲染子级？

Answer 1

当React重新渲染ParentComponent时，它会自动重新渲染ChildComponent。唯一的解决办法是在ChildComponent中执行shouldComponentUpdate。您应该比较this.props.a,this.props.b和this.props.c和ChildComponents自己的状态以决定是否重新渲染。如果您使用的是不可变数据，则只能比较上一个状态和下一个状态以及使用严格等于===的道具。

有你的代码需要注意一些事情

1. 你不需要forceUpdate当你setState。 React会自动为你做。

2. 你大概的意思是：

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