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

Question

[user_of_toster]

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

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

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

Comments

[Василий Банников]

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

Лучше посмотреть в devtools

[user_of_toster]

Василий Банников, в devtools profiler время растет, но медленно. Из-за этого я не могу понять причину роста - рендеринг или сравнение массивов перед рендерингом.

Answer 1

[nowm]

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

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

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

Answer 2

[Дмитрий Макаров]

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

Могу заблуждаться. Но зато искренне =)

Comments

[user_of_toster]

Все компоненты имеют уникальный ключ. В devtools profiler время растет, но медленно. Из-за этого я не могу понять причину роста - рендеринг увеличивающего числа компонентов или сравнение увеличивающихся массивов перед рендерингом.

[Дмитрий Макаров]

в каком смысле "уникальный"?

тут тонкое место
можете показать/рассказать как определяется ключ для react-элемента для элемента массива?

[user_of_toster]

Дмитрий Макаров, разные) ключи - обычные номера. При этом старые компоненты имеют постоянный ключ (не меняется при добавлении данных).

Answer 3

[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

Comments

[user_of_toster]

Это достоверная информация? Я использую первый вариант, но в профиле если кликнуть на родителя и на каждый рендер, то там показывается, что все чайлды заново рендерятся.

[user_of_toster]

Или так и должно быть, и под капотом ре-рендеринга нет?

[profesor08]

user_of_toster, почитай что пишут по ссылке, можешь лично убедиться, сравнивая ссылки на dom элементы.

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