React: Что такое Pure Components и как они помогают избежать лишних перерисовок (renders) интерфейса?
Pure Components в React — это особый тип компонентов, который автоматически реализует оптимизацию производительности за счёт поверхностного сравнения (shallow comparison) пропсов и состояния перед каждым рендером.
## Как работают обычные компоненты
По умолчанию классовый компонент в React перерисовывается каждый раз, когда вызывается метод `setState` или изменяются пропсы — даже если новые значения идентичны старым. Это может приводить к избыточным рендерам и снижению производительности.
## Что такое Pure Component
`React.PureComponent` — это базовый класс, аналогичный `React.Component`, но с одним ключевым отличием: он автоматически реализует метод жизненного цикла `shouldComponentUpdate` с логикой поверхностного сравнения. Если пропсы и состояние не изменились (по значению для примитивов и по ссылке для объектов), компонент не перерисовывается.
jsx
class MyComponent extends React.PureComponent {
render() {
return
;
}
}
## Поверхностное сравнение (Shallow Comparison)
Поверхностное сравнение проверяет:
— Для примитивов (строки, числа, булевы): сравниваются значения.
— Для объектов и массивов: сравниваются ссылки, а не содержимое.
Это значит, что если вы передаёте новый объект с теми же данными, Pure Component всё равно перерисуется, потому что ссылка изменилась.
## Функциональный аналог: React.memo
Для функциональных компонентов существует аналог — `React.memo`. Он оборачивает компонент и также выполняет поверхностное сравнение пропсов:
jsx
const MyComponent = React.memo(function MyComponent({ title }) {
return
;
});
`React.memo` также принимает второй аргумент — функцию сравнения, что даёт больше гибкости.
## Когда использовать Pure Components
— Компонент часто получает одни и те же пропсы.
— Компонент рендерит большое дерево дочерних элементов.
— Вы хотите избежать дорогостоящих вычислений при рендере.
## Когда НЕ стоит использовать
— Если пропсы всегда меняются — дополнительное сравнение только замедлит работу.
— Если компонент работает с мутируемыми объектами — поверхностное сравнение не поймает изменения внутри объекта.
## Практические советы
1. Избегайте создания новых объектов и функций прямо в JSX — это ломает оптимизацию.
2. Используйте `useCallback` и `useMemo` в связке с `React.memo`.
3. Не злоупотребляйте мемоизацией — профилируйте сначала с помощью React DevTools.
Pure Components — мощный инструмент оптимизации, но применять его нужно осознанно, понимая механику поверхностного сравнения.