Чем React.PureComponent отличается от React.Component с точки зрения оптимизации производительности и поведения при ре-рендере?

Определение

Pure Components в React — это специализированная версия React.PureComponent, которая автоматически оптимизирует перерисовку, реализуя логику поверхностного сравнения без необходимости писать код вручную.

Ключевые отличия от обычных компонентов

React.Component перерисовывается каждый раз, когда вызывается shouldComponentUpdate(), независимо от того, изменились ли на самом деле props или state. В отличие от этого, React.PureComponent автоматически выполняет поверхностное сравнение и props, и state перед тем, как решить, нужна ли перерисовка.

Как это работает

Когда props или state меняются в Pure Component:

• React автоматически сравнивает текущие и новые props
• React автоматически сравнивает текущий и новый state
• Компонент перерисовывается только если сравнение обнаружит реальные изменения
• Если ничего не изменилось, перерисовка пропускается

Когда это использовать

Pure Components полезны когда:

• Ты хочешь предотвратить ненужные перерисовки
• Твой компонент часто получает одинаковые props
• Оптимизация производительности — приоритет
• Ты работаешь с простыми структурами данных (объекты, массивы)

Важное ограничение

Поверхностное сравнение означает, что React проверяет только первый уровень объектов. Для глубоко вложенных структур данных или сложных изменений state Pure Components могут не предотвращать ненужные перерисовки так, как ожидается. В таких случаях стоит использовать React.Component с кастомным методом shouldComponentUpdate().

Резюме

Pure Components избавляют от шаблонного кода, автоматически реализуя проверки поверхностного равенства, что делает их идеальными для простых компонентов, где props и state не содержат сложных вложенных структур.