javascript - 为什么 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}))
   }
});

当部分状态发生变化时，整个组件会重新绘制。问题是，在我的项目中，我有很多 child ，重新绘制整个组件会使我的项目太慢。因为我必须等待所有组件更新(我指的是大约 200 个子组件)。

谁能告诉我为什么会这样？

谢谢

Answer 1

其实我是这样解决的。如果元素的状态发生变化或者有不同的键，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();
    }

})