Что такое PureComponent и зачем он нужен?

Question

PureComponent - это базовый класс в React, который автоматически реализует метод shouldComponentUpdate с поверхностным сравнением пропсов и состояния. Он предотвращает лишние ререндеры компонента, когда пропсы и состояние не изменились, что улучшает производительность приложения.

YeaHub · Accepted Answer

PureComponent в ReactPureComponent - это оптимизированная версия обычного React.Component, которая автоматически обрабатывает логику предотвращения ненужных ререндеров.Как работает PureComponentPureComponent автоматически реализует shouldComponentUpdate с поверхностным сравнением (shallow comparison):javascriptclass MyComponent extends React.PureComponent { render() { return

{this.props.value}

; } }Сравнение с обычным ComponentОбычный Component:javascriptclass RegularComponent extends React.Component { // Без shouldComponentUpdate - всегда ререндерит render() { return

{this.props.value}

; } }PureComponent:javascriptclass OptimizedComponent extends React.PureComponent { // Автоматически имеет shouldComponentUpdate // с поверхностным сравнением пропсов и состояния render() { return

{this.props.value}

; } }Механизм поверхностного сравненияPureComponent сравнивает пропсы и состояние следующим образом:javascript// Пример логики поверхностного сравнения function shallowEqual(objA, objB) { if (objA === objB) return true; if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { return false; } const keysA = Object.keys(objA); const keysB = Object.keys(objB); if (keysA.length !== keysB.length) return false; for (let i = 0; i < keysA.length; i++) { if (!objB.hasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) { return false; } } return true; }Когда использовать PureComponentПодходящие случаи:javascript// 1. Компоненты с примитивными пропсами class UserInfo extends React.PureComponent { render() { return (

{this.props.name}

Возраст: {this.props.age}

); } } // 2. Статические компоненты class Header extends React.PureComponent { render() { return

{this.props.title}

; } }Неподходящие случаи:javascript// 1. Компоненты с часто изменяющимися объектами/массивами class UserList extends React.PureComponent { render() { // Плохо: users всегда новый массив return this.props.users.map(user => ); } } // 2. Компоненты с функциями в пропсах class Button extends React.PureComponent { render() { // Плохо: onClick всегда новая функция return ; } }Функциональные компоненты с React.memoДля функциональных компонентов аналогом PureComponent является React.memo:javascriptconst MyComponent = React.memo(function MyComponent(props) { return

{props.value}

; }); // С кастомной функцией сравнения const MyComponent = React.memo( function MyComponent(props) { return

{props.value}

; }, function areEqual(prevProps, nextProps) { // Возвращает true, если ререндер не нужен return prevProps.value === nextProps.value; } );Практические рекомендации1. Избегайте мутацийjavascript// Плохо - создает новый объект каждый раз this.setState({ user: { ...this.state.user, name: 'Новое имя' } }); // Лучше - если возможно, используйте примитивы this.setState({ userName: 'Новое имя' });2. Используйте стабильные ссылкиjavascript// Плохо class Parent extends Component { handleClick = () => { /* ... */ }; render() { return {}} />; } } // Хорошо class Parent extends Component { handleClick = () => { /* ... */ }; render() { return ; } }Вывод: PureComponent следует использовать для компонентов, которые получают примитивные пропсы или редко изменяющиеся объекты. Он автоматически предотвращает ненужные ререндеры через поверхностное сравнение, но требует осторожности с мутируемыми данными и функциями в пропсах.