Как работает обновление (rerender) в React?

Обновление (rerender) в React — это процесс, при котором компонент пересоздает своё JSX-представление в ответ на изменения. Основными триггерами для этого являются изменение внутреннего состояния компонента (через setState или хук useState) или получение новых свойств (props) от родительского компонента.

Как запускается перерисовка

Когда вызывается функция обновления состояния (например, setCount), React помечает компонент как нуждающийся в обновлении. Это не означает мгновенного изменения DOM. React планирует обновление и выполняет его позже, обычно в рамках одного цикла событий (event loop), что позволяет группировать несколько обновлений для эффективности.

Процесс согласования (Reconciliation)

После того как компонент помечен для обновления, React вызывает его функцию рендеринга (render method или тело функционального компонента). Эта функция возвращает новое дерево React-элементов (виртуальное DOM). Далее React сравнивает это новое дерево с предыдущим, сохранённым в памяти. Этот процесс называется согласованием (reconciliation).

Ключевые этапы согласования

• Дифференциальный алгоритм (Diffing): React рекурсивно сравнивает элементы на каждом уровне дерева. Если тип элемента (например, <div> или другой компонент) изменился, React уничтожает старое поддерево и строит новое.
• Ключи (Keys): При рендере списков ключи помогают React идентифицировать, какие элементы были изменены, добавлены или удалены. Это критически важно для производительности.
• Применение изменений: После вычисления разницы (diff) React вносит минимально необходимые изменения в реальный DOM-дерево браузера.

Пример кода

Рассмотрим простой компонент-счётчик:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // Эта функция вызывает rerender
  const handleClick = () => {
    setCount(count + 1); // Изменение состояния -> планирование обновления
  };

  // Тело компонента выполняется при каждом rerender
  console.log('Компонент отрисован, count =', count);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={handleClick}>Нажми меня</button>
    </div>
  );
}

Каждый клик по кнопке вызывает setCount, что приводит к изменению состояния. React планирует обновление компонента Counter, заново выполняет его тело, сравнивает результат с предыдущим виртуальным DOM и обновляет только текст внутри тега <p> в реальном DOM.

Оптимизация перерисовок

Не все изменения состояния или props должны приводить к перерисовке всего поддерева. Для оптимизации используются:

• React.memo для мемоизации функциональных компонентов.
• useMemo и useCallback для мемоизации значений и функций, чтобы предотвращать лишние обновления дочерних компонентов.
• Правильное использование ключей (keys) в списках.

Вывод: Механизм rerender в React, основанный на виртуальном DOM и согласовании, обеспечивает декларативный и эффективный способ обновления пользовательского интерфейса. Понимание этого процесса необходимо для написания производительных React-приложений и правильной оптимизации компонентов.