Как избежать повторного рендеринга 10000 imageComponent после изменения состояния редукции?

Question

Я использую реаги + редукс. У меня есть 100000 (пример) ImageComponent внутри родительского компонента, скажем, ImageGrid. Функциональность каждого ImageComponent есть, пользователь может лайкнуть, удалить и выбрать.

Проблема в том, что, когда мне нравится, удаляю или выбираю какой-либо один компонент ImageComponent, я обновляю его состояние с помощью редукции, и при каждом изменении состояния он отображает все 100000 ImageComponent.

Как избежать этого ненужного повторного рендеринга тех ImageComponent, которые не изменились?

Answer 1

shouldComponentUpdate () можно использовать для предотвращения проблемы рендеринга по умолчанию

Официальный документ: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Вот сообщение об этой аналогичной проблеме

Answer 2

Вы можете добавить shouldComponentUpdate к ImageComponent, чтобы предотвратить его повторный рендеринг, если его реквизиты / состояние не изменились.

Если ваш реквизит неглубокий, вы можете объявить его как React.PureComponent. Если ImageComponent подключен к Redux, то это выполняется автоматически (без повторного рендеринга, если mapStateToProps возвращает те же реквизиты).

Вы, вероятно, не должны рендерить 10000 компонентов одновременно. Попробуйте реагировать-виртуализировано .

Также вы должны предоставить уникальный и стабильный ключ для каждого компонента.