javascript - 对输入更改 react 缓慢

Question

我是 React 的新手，在使用 onChange 时遇到了问题在大数据列表中生成的输入字段上的方法。
如 parentcomponent是数据的拥有者，我提供了handleUpdate()子组件 (dataTableComponent) 的方法。
因为 React 必须重新渲染整个 datatgrid 输入 onChange很慢。
我怎样才能做得更好？有没有办法只更新一个修改过的行。或者我的 react 有什么问题？

总结: ParentComponent 包含一个包含传递给 childComponent 的对象的数组。 childComponent 创建一个 <table>具有数据对象属性作为列的元素。一列可编辑并显示为 am <input>标签。这个标签有一个 onChangehandler指向父级传递的函数。所以父级处理更新并因此重新呈现整个列表。对我自己来说很清楚，这必须很慢。但是我怎么能做得更好呢？

Answer 1

我之前遇到过这个问题。

将每一行作为一个单独的组件，并要求父组件在其中传递 Prop 。在 row 组件的构造函数中，将 props 存储在 state 中，现在只玩 state，不要调用 parent handler 来更新。

如果您希望所有输入字段都更新回来，请在父组件中使用 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}/>
   }
}