React повторно визуализирует ненужный компонент после изменения свойства
Итак, у меня есть редуктор autocomplete, в котором хранятся все параметры, загруженные через react-select. Еще у меня есть два компонента - <Parent /> и <Modal />. Оба они подключены к состоянию редукции для получения реквизита autocomplete, потому что оба имеют свой собственный компонент <AsyncSelect />.
Select, который является потомком компонента <Parent />, получает параметры от редуктора: autocomplete.labels. Второй компонент Select, который является потомком <Modal />, получает параметры от редуктора: autocomplete.differentLabels.
Теперь, когда я использую Select, который является потомком Modal, весь компонент Parent перерисовывается, даже если нет jsx, зависящего от autocomplete. Это ожидаемое поведение? Из-за этого повторного рендеринга производительность снижается.
Может стоит разделить labels и differentLabels на отдельные редукторы?
Ответы 1
Возможным решением может быть использование shouldComponentUpdate для сравнения текущих свойств с предыдущими и выполнения там некоторой логики, чтобы предотвратить ненужное обновление.
shouldComponentUpdate(nextProps, nextState) {
if (this.props.myProp !== nextProps.myProp) {
// Your logic
return false;
}
return true;
}
Нужно ли писать собственный метод shouldComponentUpdate? Я пробовал использовать PureComponent, но это не сработало, как ожидалось. В моем компоненте есть только одно место, где я использую редуктор autocomplete, и это обратный вызов для react-select: const { labels } = this.props.autocomplete; callback(labels);.
@AmanshuKataria Да, вы совершенно правы. Я должен был написать shouldComponentUpdate, но я не знаю, как я по ошибке набрал его как componentDidUpdate. Хорошо поймал. РЖУ НЕ МОГУ.
Разве это не должно быть
shouldComponentUpdateвместоcomponentDidUpdate? Причина в том, чтоcomponentDidUpdateпроверит наличие каких-либо изменений опоры, а затем что-то выполнит, тогда какshouldComponentUpdateпросто проверит опору, а затем разрешит компоненту обновляться в зависимости от условия.