ReactJsなぜ部分的な状態が変化したときにコンポーネント全体を描画するのですか？

Question

私は子供が2人いるコンポーネントがあります。

React.createClass({ 
    getInitialState: function(){ 
     return {ch_1 : 'Child 1', ch_2: 'child_2'}; 
    }, 
    _onChange : function(e){ 
     var value = e.target.value; 
     var id = e.target.id; 
     if(id == '1'){ 
      this.setState({ch_1 : value}); 
     } 
     else{ 
      this.setState({ch_2 : value}); 
     }; 
    }, 
    Render : function(){ 
     return React.createElement('div', {key: 10000 }, 
     React.createElement('input', {id: '1', key: 10, value: this.state.ch_1, 
      onChange: this._onChange}), 
     React.createElement('input', {id: '2', key: 20, value: this.state.ch_2, 
      onChange: this._onChange})) 
    } 
}); 

部分的な状態が変更されると、コンポーネント全体が再び描画されます。問題は、私のプロジェクトではたくさんの子供がいて、コンポーネント全体を再描画するとプロジェクトが遅すぎるということです。私はすべてのコンポーネントが更新されるのを待たなければならないので（私は約200人の子供について話している）。

いずれにしても、そのように機能する理由を教えてください。

が

Answer 1

ありがとうコンポーネント内の状態変化は、その中のコンポーネント全体とその子コンポーネントの再描画が発生します。これを最適化するには、ここで説明するライフサイクルメソッドshouldComponentUpdateを使用できます。 https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdateメソッドの内部では、独自のチェックに基づいてコンポーネントを再レンダリングできます。

したがって、コンポーネントの小道具または状態が変更されない場合、コンポーネントは不要に再レンダリングされません。

Answer 2

実際に私はこのように解決しました。 Reactは、その状態が変化した場合、または別のキーがある場合、要素を再レンダリングします。私は各要素を一意に戻す関数を実装しました。

React.createClass({ 
    customData: { 
     keys: {} 
    }, 
    getKey : function(path/*can be div-root-object-attribute-*/ , 
     elementName /*I use className*/){ 

     var numberSeparator = '###'; 
     var keyPrefix = 'key_' + path.replace(/ /g,'_') + '_' + 
       elementName.replace(/ /g,'_') + numberSeparator; 

     var newNumber = this.customData.keys[keyPrefix] != null ? 
       this.customData.keys[keyPrefix] + 1 : 1; 
     newKey = keyPrefix + newNumber; 
     this.customData.keys[keyPrefix] = newNumber; 

     return newKey; 
    }, 
    render : function(){ 
      //important => so it will try to render again with the same 
      //keys and will skip element with unchanged state 
      this.customData.keys = {}; 
      return React.createElement(); 
    } 

}）