Как react+redux ререндерит компонент?



@user_of_toster

Хочу сделать infinite scroll на react, redux, react-redux

Есть компонент InfiniteScroll, который получает массив данных с redux в пропсах. При достижении конца страницы в этот массив добавляются еще данные. При этом reducer каждый раз отправляет новый инстанс массива, который включает в себя старые+новые данные.

Вопрос – реакт заново перерендерит всё или только новые данные (т.е разницу между последним и предпоследним массивом)?


Решения вопроса 3



@nowm

Компонент рендерит всё. Пришли изменения — новый рендер всего-всего. Если у вас в рендере происходит какая-то фильтрация/сортировка данных, она пройдёт полностью для тех данных, которые доступны в данный момент. Конечно же, у реакта есть возможность закэшировать какой-то компонент (который вы обозначили с помощью key или в который передались идентичные данные), и в таком случае скорость сильно не страдает, но нужно иметь ввиду, что если к массиву из миллиона элементов добавится массив из 100 тысяч элементов, реакт будет обрабатывать все 1,1 миллион элементов, а не ту новую сотню тысяч, которая пришла. Часть он возьмёт из кэша, часть отрисует заново.

Лично из моей практики, производительность начинает сильно падать, если вы перед рендерингом постоянно применяете сортировку, фильтрацию и подобные вещи, которые требуют обходить весь массив с данными. Я обычно делаю фильтрацию/сортировку только в момент, когда приходят изменения данных, и сохраняю это в состоянии, чтобы не делать этого каждый раз перед отрисовкой.

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

Комментировать

Ответы на вопрос 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *