PureComponent и Components

#начинающим #react

При разработке реакт-приложений используют два типа компонентов:
1) React.Component
2) React.PureComponent

Также можно описывать компоненты не через class, а функцией, но это обычный React.Component без state и lifecycle методов.

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

В react lyfecycle компонентов существуют два процесса: mounting и updating.

Mounting lifecycle выглядит так:

1) constructor
2) componentWillMount
3) render
4) componentDidMount

Updating lifecycle:

1) componentWillReceiveProps
2) shouldComponentUpdate
3) componentWillUpdate
4) render
5) componentDidUpdate

Разница между Component и PureComponent заключается в методе updating lifecycle: shouldComponentUpdate.

В Component этот метод выглядит так:

shouldComponentUpdate() {
return true;
}

В PureComponent:

shouldComponentUpdate(nextProps, nextState) {
return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state);
}

PureComponent изначально определяет функцию, которая ответствена за принятие решения — нужно ли продолжать updating lifecycle или нет.

Разберем пример:
1) Родитель поменял свое состояние и рендерит детей
2) PureComponent Users получает задачу на ререндер, но его props не изменились. 
2.1.) shouldComponentUpdate класса Users вернет false, так как ссылки на все поля props остались прежними. 
2.2.) Дальнейшие методы Updating не вызываются
3) Component List получает задачу на ререндер, но его props не изменились. 
3.1.) shouldComponentUpdate класса List вернет true, не смотря на то, что ссылки на все поля props остались прежними. 
3.2.) Вызываются методы componentWillUpdate, render, componentDidUpdate
3.3.) Ререндарятся все дети компонента List

Из этих двух компонентов меньше процессорного времени съедает Users, так как он не будет запускать обновление себя и своих детей. 
Поэтому PureComponent очень удобный способ оптимизации рендера “из коробки”.

Пара заметок:
1) НЕ переопределяйте shouldComponentUpdate, если используете PureComponent. Используйте в таком случае Component!

2) НЕ ПИШИТЕ shouldComponentUpdate следующим образом:

shouldComponentUpdate(nextProps, nextState) {
return !JSON.stringify(nextProps) === !JSON.stringify(this.props) || !JSON.stringify(nextState) === !JSON.stringify(this.state);
}