Погружается ли PureComponent в глубину при сравнении

Краткий ответ

Нет, PureComponent НЕ производит глубокое (deep) сравнение пропсов и состояния. Он выполняет поверхностное (shallow) сравнение, то есть проверяет равенство ссылок (reference equality) на объекты первого уровня вложенности.

Детальное объяснение принципа работы

PureComponent — это базовый класс в React, который автоматически реализует метод shouldComponentUpdate с поверхностным сравнением.

Как работает поверхностное сравнение

При сравнении пропсов и состояния PureComponent проверяет:

1. Ссылочную идентичность примитивов (строк, чисел, boolean)
2. Ссылочную идентичность объектов и массивов

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.data.value}</div>;
  }
}

// Пример 1: Поверхностное сравнение сработает
const props1 = { data: { value: 1 } };
const props2 = { data: { value: 1 } };
// Сравнение: props1.data === props2.data? → false (разные ссылки)
// Компонент БУДЕТ перерендерен, даже если значения одинаковы

// Пример 2: Та же ссылка
const data = { value: 1 };
const props3 = { data };
const props4 = { data };
// Сравнение: props3.data === props4.data? → true (одинаковые ссылки)
// Компонент НЕ будет перерендерен

Почему не глубокое сравнение

React сознательно избегает глубокого сравнения по нескольким причинам:

Производительность: Глубокое сравнение сложных объектов может быть очень затратным

// Глубокое сравнение требовало бы рекурсивного обхода
const deepCompare = (obj1, obj2) => {
  if (typeof obj1 !== typeof obj2) return false;
  if (typeof obj1 !== 'object') return obj1 === obj2;
  
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  
  for (let key of keys1) {
    if (!deepCompare(obj1[key], obj2[key])) return false;
  }
  return true;
};
// Такая операция O(n) для каждого prop может замедлить приложение

Предсказуемость: Поверхностное сравнение дает разработчикам полный контроль над процессом оптимизации

Семантика изменений: В React данные считаются изменившимися только при создании новых объектов

Практические последствия и рекомендации

Работа с вложенными объектами

// ❌ Проблемный код
class UserProfile extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>{this.props.user.name}</h1>
        <p>{this.props.user.profile.bio}</p>
      </div>
    );
  }
}

// Изменение вложенного свойства не вызовет ререндер
const user = { name: "Иван", profile: { bio: "Разработчик" } };
user.profile.bio = "Старший разработчик"; // Изменение на месте
// PureComponent НЕ увидит изменения!

// ✅ Решение: Создавать новые объекты
const updatedUser = {
  ...user,
  profile: { ...user.profile, bio: "Старший разработчик" }
};

Эффективные паттерны работы

Иммутабельные обновления:

// Использование spread оператора
const newProps = { ...oldProps, data: { ...oldProps.data, value: 42 } };

// Использование библиотек
import update from 'immutability-helper';
const newState = update(oldState, { data: { value: { $set: 42 } } });

// Использование встроенных методов, возвращающих новые массивы
const newArray = oldArray.concat(newItem);
const filteredArray = oldArray.filter(item => item.id !== id);

Селекторы и мемоизация:

import { createSelector } from 'reselect';

const getUsers = state => state.users;
const getActiveFilter = state => state.filters.active;

const getFilteredUsers = createSelector(
  [getUsers, getActiveFilter],
  (users, filter) => users.filter(user => user.status === filter)
);
// Селектор возвращает ту же ссылку, если результат не изменился

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

✅ Хорошие случаи:

• Компоненты с примитивными пропсами
• Статические или редко изменяющиеся компоненты
• Списки с фиксированными данными

❌ Плохие случаи:

• Компоненты с часто изменяющимися вложенными объектами
• Компоненты, получающие новые ссылки на каждый рендер (например, inline-функции)
• Когда требуется глубокое сравнение по бизнес-логике

Альтернативы

React.memo

const MemoizedComponent = React.memo(
  MyComponent,
  (prevProps, nextProps) => {
    // Кастомная функция сравнения
    return prevProps.id === nextProps.id && 
           prevProps.data.value === nextProps.data.value;
  }
);

useMemo и useCallback для функциональных компонентов

const ExpensiveComponent = React.memo(({ data, onAction }) => {
  return <div onClick={onAction}>{data.value}</div>;
});

const ParentComponent = ({ userId }) => {
  const data = useMemo(() => fetchData(userId), [userId]);
  const handleAction = useCallback(() => {
    // логика обработки
  }, []);
  
  return <ExpensiveComponent data={data} onAction={handleAction} />;
};

Вывод

PureComponent использует поверхностное сравнение как компромисс между производительностью и полезностью. Эффективная работа с ним требует понимания иммутабельных обновлений данных и правильного структурирования компонентов. Для сложных сценариев сравнения следует использовать React.memo с кастомной функцией сравнения или другие техники оптимизации.