Когда происходит перерендеринг компонента в реакт?

Question

[serhii328764]

Всем привет! Есть непонятные моменты по пониманию перерисовки компонентов.
В теории перерендеринг компонентов в реакте вызывается, когда:
1. Изменение внутреннего состояния компонента (this.setState);
2. Изменение свойств (props) компонента, полученных от родителя или перерисовка родителя.
Здесь непонятно. Если измениться внутренний state на самом верхнем компоненте App, то перерисуются абсолютно все компоненты ниже по дереву? А если только 1 из 10 получил изменение в передаваемые props, а для остальных входящие данные props не изменились, то все равно все перерисуются?
3. При изменение контекста. Также нужен комментарий по этому пункту. Непонятно, как может измениться передаваемый объект с данными с помощью context в ходе работы приложения? Разве перечень св-ств может на ходу поменяться?

Answer 1

[Антон Спирин]

1. Перерисовка компонента происходит, как следствие перерисовки родителя или вызовов this.setState() или this.forceUpdate().
Ее можно контролировать в class components с помощью метода жизненного цикла shouldComponentUpdate. При вызове this.forceUpdate() shouldComponentUpdate не вызывается.

2.

Изменение свойств (props) компонента, полученных от родителя или перерисовка родителя.

Получить новые свойства без перерисовки родителя невозможно.

Чтобы дочерние компоненты не перерисовывались по цепочке, вы должны реализовывать метод shouldComponentUpdate или использовать PureComponent там, где это уместно. Перерисовку функциональных компонентов контролировать нельзя(разве с помощью HOC). Использование HOC connect убирает все лишние перерисовки дочернего компонента.

3. Провайдеры это обычные компоненты. Перерисовывается родитель - перерисовываются они.

Все, что я написал выше, кроме кейса с connect, есть в официальной документации. Стоит открыть почитать.

Comments

[davidnum95]

Добавлю еще, что в 16.7 добавят React.memo, который позволяет контролировать перерисовку функциональных компонентов по аналогии с PureComponent и shouldComponentUpdate.
https://reactjs.org/docs/hooks-faq.html#how-do-i-i...