Реагирование медленное на изменение ввода

Question

Я довольно новичок в реактиве и столкнулся с проблемой при использовании метода onChange на поле ввода, которое генерируется большим каталогом данных.
Поскольку parentcomponent является владельцем данных, я предоставляю метод handleUpdate() дочернему компоненту (dataTableComponent).
Поскольку React должен перезагрузить весь datatgrid, вход onChange работает очень медленно.
Как бы я сделал это лучше? Есть ли способ обновить только одну измененную строку. Или что мне не так реагировать?

Описание: ParentComponent содержит массив с объектами, который передается дочернему компоненту. ChildComponent создает элемент <table> с атрибутами объектов данных в виде столбцов. Один столбец редактируется и отображается как тэг <input>. Этот тег имеет onChangehandler, указывающий на функцию, переданную родителем. Таким образом, родитель обрабатывает обновление и, следовательно, редертирует весь список. Для меня ясно, что это должно быть медленным. НО, как я мог сделать это лучше?

Answer 1

Я пробовал как @ сказал Piyush.kappor. Но я всегда думал, что это не приятно. Наличие даты сохранено избыточно.

Теперь я наконец нашел решение.

я оставил его, как это было:

приложение содержит список объектов и обрабатывает когда-либо ввода изменений. Это будет очень медленно, но теперь я добавил метод shouldComponentUpdate(). Поэтому каждая строка проверяет, нужно ли ее обновлять. Если нет, это не будет. Поэтому у меня больше нет лагов, но данные все еще обрабатываются в одном месте.

Answer 2

Я столкнулся с этой проблемой ранее.

Сделайте каждую строку как отдельный компонент и попросите родительский компонент передать реквизиты. В конструкторе компонента строки храните реквизит в состоянии и теперь просто играйте с состоянием, не вызывайте обработчик родительского элемента для обновления.

Если вы хотите, чтобы все ваши поля ввода обновляются назад, использование рефов в родительском компоненте для извлечения данных

Пример:

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}/> 
    } 
}