user_of_toster
@user_of_toster

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

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

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

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

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

Если элементов становится слишком много, тормоза появятся не только из-за реакта, а из-за того. что браузер тоже не резиновый, и ему тоже требуются ресурсы и время на отрисовку страницы.
Ответ написан
DmitryITWorksMakarov
@DmitryITWorksMakarov
Не очень давно в react|redux`е.
Но впечатление такое: если новый инстанс - то будет новый рендер.
Если пометить реакт-элемент отображающий список элементов ключом, который будет постоянным при разных инстансах массива, то не должен перерендериваться.
Ключи реакт-элементов старых элементов данных тоже должны сохраняться неизменными, тогда они не будут перерендерироваться.

Могу заблуждаться. Но зато искренне =)
Ответ написан
profesor08
@profesor08
Если твой код похож на этот, то лишнего не будет рендериться. id должен быть уникальным и не меняться для одних и тех-же элементов списка.
const List = ({ items }) => {
  return items.map((item) => <Item key={item.id} item={item} />);
};


Если твой код похож на этот, то не известно что будет рендериться. Да и непонятные вещи начнут происходить.
const List = ({ items }) => {
  return items.map((item, index) => <Item key={index} item={item} />);
};


https://reactjs.org/docs/lists-and-keys.html
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы