は、データ

Question

だけ変更されたサブセットをレンダリングするために不変ヘルパーを反応させ、私は唯一の変更されたデータの一部をレンダリングしようとしているここhttp://jsfiddle.net/8xzxkteu/1/

を例を参照してください。この例では、コンポーネントMain、dataの状態はidでインデックス付けされていますが、反応不能ヘルパーを使用して変更されたものだけを設定しています。しかし、出力をクリックすると、カウンターに示されているようにすべての子をレンダリングします。私は不変性ヘルパーを使用して反応するだけでそれをレンダリングされたデータの一部だけを検出することができます。私はおそらくshouldComponentUpdateを使用し、各子供のオブジェクト値を比較することができますが、不変性ヘルパーでこれを行うより良い方法があります。

あなたがコンポーネントの状態を変更

class Child extends React.Component { 
    constructor(props) { 
     super(props); 
     this.onClick = this.onClick.bind(this) 
     this.state = { 
      count: 0 
     }; 
    } 

    componentWillReceiveProps(nextProps) { 
     var count = this.state.count + 1; 
     this.setState({ count: count }); 
    } 

    onClick() { 
     this.props.onClick(this.props.name); 
    } 

    render() { 
     return <p onClick={this.onClick}>{this.props.name}: {this.props.value} {this.state.count}</p>; 
    } 
    } 

    class Main extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.handleChange = this.handleChange.bind(this) 
     this.state = { 
      data: { 
       "a" : "a", 
       "b" : "b", 
      } 
     }; 
    } 

    handleChange(id) { 
     this.setState({ 
     data: React.addons.update(this.state.data, { [id]: { $set: 'x' } }) 
     }); 
    } 

    render() { 
     const keys = Object.keys(this.state.data); 
     const children = keys.map(k => { 
      return <Child name={k} value={this.state.data[k]} onClick={this.handleChange}/> 
     }) 
     return <div> 
      {children} 
      </div>; 
    } 
    } 

    React.render(<Main />, document.getElementById('container')); 

Answer 1

はそれがtrueを返すされている場合、このコンポーネントのshouldComponentUpdateを呼び出すと反応するが、このコンポーネントのレンダリング呼び出し反応します。その後

は反応しすべて子コンポーネントの（shouldComponentUpdateリターンtrueの場合）render、その後、shouldComponentUpdateそして、componentWillReceivePropsを呼び出します。

shouldComponentUpdateメソッドがない場合、デフォルトではtrueが返されたと見なされます。あなたが不変のデータを使うのかどうかは関係ありません。反応はそれについて知りません。

再レンダリングを避けたい不変のデータがある場合は、shouldComponentUpdateを使用してください。たとえば、pure-render-decoratorを使用できます。コンポーネントの状態と小道具をチェックします。

componentWillReceivePropsで状態を変更した場合は、shouldComponentUpdateより前にcomponentWillReceivePropsが呼び出されているので、まだ再レンダリングが行われます。