Что такое синтетические события

Question

Что такое синтетические события

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

Синтетические события — это обёртка над нативными событиями браузера в React, обеспечивающая кросс-браузерную совместимость. Они работают одинаково во всех браузерах, автоматически обрабатывая различия в API событий.

Ключевые особенности:

Объединяют поведение разных браузеров в единый интерфейс
Используют пулинг событий для производительности
События делегируются на корневой элемент (React 17+ изменено)

Пример обработки:

function handleClick(e) {
  e.preventDefault(); // Синтетическое событие
  console.log(e.type); // 'click'
}

<button onClick={handleClick}>Click</button>

Синтетические события имеют те же свойства, что и нативные, но с некоторыми отличиями (например, e.nativeEvent даёт доступ к оригинальному событию). React автоматически освобождает ресурсы событий после обработчиков.

Ответ 18+ 🔞

А, синтетические события в Реакте, ну это же классика, блядь! Слушай, представляешь, сидишь ты, пишешь на чистом JS, и тут — бац! — в одном браузере событие всплывает, как полагается, а в другом — нихуя, как вкопанное. Или там event.target один показывает, а другой — совсем другую хуйню. Кошмар, ёпта!

Так вот, ребята из Реакта, видимо, тоже с этой хуйнёй намучились, и говорят: «А давайте мы сделаем свою, блядь, прослойку!». И родились эти самые синтетические события. По сути, это такая хитрая обёртка, которая натягивает единую, понятную тряпку на всех этих браузерных уродцев.

Что они делают, эти синтетические события, а?

Кросс-браузерность, мать её. Тебе больше не нужно писать if (ie) { ... } else if (firefox) { ... }. Написал один раз — и оно везде работает одинаково. Красота, блядь!
Пулинг, ёбаный в рот. Это для производительности. Вместо того чтобы создавать новый объект события на каждый чих, Реакт их переиспользует. Событие отработало — его свойства занулили и отправили на склад. Экономия, как говорится, ебать.
Делегирование. Раньше (до 17-й версии, блядь) все события висели на document. Сейчас, вроде, повесили на корневой элемент рендера. Но суть та же: не на каждый button вешается слушатель, а один на верх. Умно, чё.

А как этим пользоваться-то? Да почти так же, как с обычными!

function handleClick(e) { // e — уже не браузерный event, а наш, синтетический, красавчик
  e.preventDefault(); // И эта хуйня сработает везде!
  console.log(e.type); // 'click'
  // Хочешь докопаться до нативного, дикого события? Пожалуйста:
  console.log(e.nativeEvent); // Вот он, голый, из браузера
}

<button onClick={handleClick}>Жми сюда, не ссы</button>

И главное, блядь, не надо за собой убирать! Реакт сам, после того как все обработчики отработают, всё почистит и события в свой пул вернёт. Удобно же, ёпта!

Короче, синтетические события — это как универсальный пульт от всех телевизоров. Не надо искать, где у этого кнопка stopPropagation, а где у того. Всё в одном месте, всё работает. Просто иногда забываешь, что под капотом-то — всё тот же старый, добрый, кривой браузерный движок, который только и ждёт, чтобы нагадить. Но Реакт его, сука, приручил.