React App Предотвратить повторное рендеринг всех элементов в сетке при обновлении Redux

Question

У меня есть приложение, которое показывает список элементов в сетке.Некоторые элементы имеют встроенное видео, которое мигает или прекращает воспроизведение (если оно уже воспроизводится) при повторной визуализации.

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

Я ищу решение, которое бы просто добавляло больше элементов в конец сетки вместо перерисовки всего.

У меня есть компонент, который содержит всю сетку.Он рендерит компонент для каждого элемента в сетке.В каждом предмете у меня есть компонент, который содержит встроенное видео.

Есть идеи?

Answer 1

Может быть, это может помочь: при передаче информации от redux к вашему компоненту, попробуйте обновить список объектов вместо того, чтобы отправлять новый

Это метод UpdateObject с избыточностью.

Answer 2

Если каждый элемент в сетке является компонентом, как вы сказали, вы должны использовать React.memo (для функциональных компонентов) или Reat.PureComponent (для компонентов класса). Это предотвратит повторную визуализацию компонента, если реквизиты не изменились. Я не могу гарантировать, что ваши видео будут продолжать воспроизводиться, но если единственная причина, по которой они перестают воспроизводиться или мигать, это то, что компонент перерисовывается, то это должно решить проблему.