Делегирование: плюсы и подводные камни
Вопрос
Как бы ты повесил обработчики кликов на список из тысячи динамических элементов? Какие есть подводные камни?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Один обработчик на контейнере вместо тысячи
Работает для элементов, добавленных позже, без перевешивания
Нужный элемент искать через `event.target.closest(...)`, клик может прийти во вложенный тег
Проверять, что найденный элемент внутри контейнера (`contains`)
Не сработает для невсплывающих событий и сломается, если кто-то ниже вызовет `stopPropagation`
Что могут спросить следом
- Как React работает с событиями: на чём висят слушатели?
- Как снять все слушатели при уничтожении компонента?
- Что делать с
mouseenter?
Разбор
Я бы использовал делегирование: один слушатель click на контейнере списка. Событие всплывает от элемента, по которому кликнули, до контейнера, и там я нахожу нужную строку через event.target.closest('[data-id]'). Так экономится память, не надо перевешивать обработчики при добавлении элементов, и код проще снимать. Подводные камни: target может оказаться вложенной иконкой, поэтому именно closest, а не сравнение tagName. Найденный элемент стоит проверить через container.contains, чтобы не зацепить предка снаружи. Делегирование не работает с невсплывающими событиями, для фокуса беру focusin, а для наведения mouseover. И если где-то внутри вызовут stopPropagation, контейнер клик не получит. Кстати, React устроен похоже: с версии 17 он вешает слушатели на корневой контейнер приложения, а не на каждый элемент.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.