У меня есть компонент реакции, который получает реквизит из магазина redux каждую секунду. Новое состояние имеет массив, отличный от последнего массива. Чтобы быть конкретным, каждую секунду элемент добавляется в массив. Например: в одном состоянии массив:
[1, 2, 3, 4, 5, 6]
следующее состояние
[1, 2, 3, 4, 5, 6, 7]
Мой редуктор:
return {
...state,
myList: [ payload, ...state.myList.filter(item => payload.id !== item.id).slice(0, -1) ]
}
Теперь, в моем реагирующем компоненте, я подписываюсь на это состояние и для каждого изменения список перерисовывается.
import React, { Component } from 'react';
import MyRow from './MyRow';
class MyList extends Component {
render() {
return (
<div>
{this.props.myList.map((list, index) => (
<MyRow key={list.id} data={list}/>
))}
</div>
);
}
}
function select({ myList }) {
return { myList };
}
export default connect(select)(MyList);
В MyRow.js
import { PureComponent } from 'react';
class MyRow extends PureComponent {
render() {
const data = this.props.data;
return (
<div>
{data.id} - {data.name}
</div>
);
}
}
export default MyRow;
Теперь моя проблема заключается в том, что мне стоило переориентировать каждый элемент, который уже был обработан. MyRow сильно использует стилизованные компоненты и другие дорогостоящие операции. Это вызывает реакцию на повторное отображение всего списка каждую секунду, когда состояние обновляется. Это становится хуже, если обновления появляются менее чем за 1 секунду, например 4 обновления в секунду. В этом случае приложение-ответ просто выйдет из строя.
Есть ли способ добавить только добавленный элемент в список, а не повторно отобразить весь список?
Спасибо