frontend-notes
Published in

frontend-notes

PureComponent и Components

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

Эта статья о реакт-компонентах, которые описаны как класс. Обратите внимание, вы также можете использовать функциональные реакт компоненты.

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

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

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

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

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

Updating lifecycle:

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

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

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

В PureComponent:

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

Разберем пример:

Вызывающий код

1) Здесь, на второй строке, компонент A будет обновлен. Так как он не является чистым компонентом, и его shouldComponentUpdate вернет true;
2) PureComponent B получает задачу на ререндер, но его props не изменились;
3) shouldComponentUpdate класса B вернет false, так как ссылки на все поля props остались прежними. (т.е. this.props.someProps === nextProps.someProps);
4) Дальнейшие методы Updating lifecycle не вызываются.

Теперь попробуем обновить someProps:

1) A ререндерится
2) PureComponent B получает задачу на ререндер, его someProps изменился
3) shouldComponentUpdate класса B вернет True (this.props.someProps !== nextProps.someProps);
4) Методы Updating lifecycle вызываются, компонент обновляется.

Если бы компонент B был объявлен не как PureComponent, а как обычный Component, то он бы обновился в обоих случаях.

Таким образом, PureComponent помогает нам сократить число операций и оптимизировать наш рендер “из коробки”.

Пара заметок:
1) Не нужно переопределять shouldComponentUpdate, если используете PureComponent.

2) Не нужно делать полное сравнение внутри shouldComponentUpdate следующим образом:

--

--

Фронтенд-разработка, вопросы-ответы, советы и хаки. Вопросы-предложения и прочее можно писать в телеграмм: @xnimorz.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store