Question

我对React很陌生，在输入字段上使用onChange方法遇到问题，输入字段是在大数据家中生成的。
由于parentcomponent是数据的所有者，因此我向子组件（dataTableComponent）提供了handleUpdate()方法。
因为React必须重新渲染整个datatgrid，所以输入onChange非常慢我该怎么做得更好？有没有办法只更新一个修改过的行。或者我的反应是什么？

摘要：ParentComponent包含一个包含对象的数组，该数组将传递给childComponent。 childComponent创建一个<table>元素，其数据对象属性为列。一列可编辑，并显示为<input>标记。此标记的onChangehandler指向父项传递的函数。因此父级处理更新，因此重新呈现整个列表。对于我自己很清楚，这一定很慢。但我怎么能做得更好呢？

Answer 1

我之前遇到过这个问题。

将每一行作为一个单独的组件，并让父组件在其中传递道具。在行组件的构造函数中，将状态存储在状态中，现在只使用状态，不要调用父处理程序进行更新。

如果您希望更新所有输入字段，请使用父组件中的refs来提取数据

示例：

Class Parent extends React.component {
   render (
            this.data.map(function(value) {
               return <Row ref={value+index} data={value}/>
            })
     }
}

Class Row extends React.Component {
   constructor() {
      super(props);
      this.state = {
          value: this.props.data
      }
   }
   render() {
     <input value={this.state.value}/>
   }
}

Answer 2

我试过像@ Piyush.kappor说的那样。但我一直认为这不是很好。保存日期是多余的。

现在我终于找到了解决方案。

我离开时就像是：

应用程序包含对象列表和处理输入更改。这将非常慢，但现在我已经添加了shouldComponentUpdate()方法。因此，如果需要更新，每一行都会进行检查。如果没有，它不会。所以我没有更多的滞后，但数据仍在一个地方处理。

输入变化时反应工作缓慢

2 个答案: