Как делегирование событий работает в React?

В обычном DOM, если у вас есть список из ста кнопок, и каждой нужен обработчик клика, вы можете повесить сто отдельных слушателей. Это дорого по памяти и медленно при изменениях. Делегирование событий решает эту проблему: один слушатель на родителе перехватывает всплывающие события от детей и определяет, кто именно был целью.

Как это устроено в React

React реализует делегирование автоматически. Когда вы пишете onClick на элементе, React не создаёт нативный слушатель на этом элементе. Вместо этого он регистрирует один слушатель на корневом контейнере (в React 17+ — на корне приложения, ранее — на document). При клике событие всплывает до корня, React смотрит на event.target, находит соответствующий Fiber-узел и вызывает ваш обработчик.

При этом вы получаете не нативный объект события, а SyntheticEvent — кроссбраузерную обёртку с тем же API. Это даёт единообразие и позволяет React управлять жизненным циклом события.

Пример

function List() {
  const handleClick = (e) => {
    // e.target — реальный DOM-элемент, по которому кликнули
    console.log('Clicked:', e.target.textContent);
  };

  return (
    <ul onClick={handleClick}>
      <li>Первый</li>
      <li>Второй</li>
      <li>Третий</li>
    </ul>
  );
}

Здесь один обработчик на <ul> обслуживает все <li>. Это классическое делегирование, но реализованное средствами React.

Важные нюансы

• События в React всплывают по дереву компонентов, а не только по DOM. Это значит, что onClick на родительском компоненте сработает даже если DOM-структура вложена иначе.
• Портал (ReactDOM.createPortal) сохраняет всплытие по React-дереву, хотя DOM-узел находится в другом месте.
• Начиная с React 17, слушатели вешаются на корневой контейнер, что упрощает встраивание React в существующие приложения и изоляцию от других библиотек.
• Некоторые события (например, onScroll, onFocus) не всплывают в DOM, но React эмулирует их всплытие через синтетическую систему.

Зачем это нужно

Делегирование снижает количество нативных слушателей, экономит память и упрощает динамическое добавление элементов. Вам не нужно вручную навешивать и снимать обработчики при изменении списка — React делает это за вас.

Итог: делегирование событий в React — это встроенный механизм, который избавляет разработчика от ручного управления слушателями и обеспечивает предсказуемое поведение. Понимание этой модели помогает избегать ошибок с stopPropagation, порталами и вложенными обработчиками.