У меня есть несколько методов в корневом компоненте приложения, которые отслеживают положение пользователя на странице.Один отслеживает положение прокрутки, сохраняя значение в хранилище избыточности, когда пользователь выполняет прокрутку (таким образом, он постоянно обновляет хранилище избыточности при прокрутке), а другие отслеживают, в каком квадранте экрана находится курсор пользователя (также обновляется хранилище при изменении).Все это происходит в компоненте приложения.Поэтому, чтобы предотвратить ненужные повторные рендеры, я реализовал shouldComponentUpdate для сравнения значений и возврата false.Это отлично работает для самого компонента App, но дочерние компоненты все еще перерисовывают эти изменения.
Дочерние компоненты не имеют доступа к этой конкретной части состояния, но, несмотря на это, они повторно визуализируются.Поэтому я предполагаю, что что-то происходит с connect().
Я попытался установить параметры для connect(mapStateToProps, null, null, {pure: true}), но это ничего не изменило.
Вот метод в моем компоненте приложения, который отслеживает прокрутку:
handleScroll = () => {
const { dispatch, scrollTop: stateScrollTop } = this.props;
let scrollDirection = 'bottom';
const scrollTop = window.pageYOffset;
if (stateScrollTop > scrollTop) {
scrollDirection = 'top';
}
dispatch(windowScroll(scrollTop, scrollDirection));
};
Если я смогу заставить дочерние компоненты останавливать рендеринг каждый раз, когда эти значения изменяются в хранилище, это обеспечило бы довольно большое повышение производительности моего приложения в целом.Буду признателен за любую помощь!