Должен ли я использовать делегирование событий в React?
![](/static/storage/321782577524094410773368808061363773525.png)
Делегирование событий - это метод оптимизации производительности в мире Javascript. Допустим, у вас есть неупорядоченный список <ul>
с 1000 элементами списка, и вы хотите что-то делать при каждом нажатии элемента списка. При подходе делегирования событий вместо добавления одного обработчика событий для каждого из дочерних элементов вы добавляете только 1 onclick
к родительскому элементу <ul>
. Это аккуратный подход.
Должен ли я использовать делегирование событий в React?
Краткий ответ: «Нет». Это не дает вам заметного выигрыша в производительности. Причина в том, что React уже проводит внутреннюю оптимизацию производительности.
Тест производительности
Я хотел проверить это сам. Итак, я создал тестовый проект с 3000 кнопок. Когда кнопка нажата, мы меняем ее состояние на «Выбрано» в родительском контейнере, и цвет фона меняется.
Вы можете проверить две демонстрации здесь.
- Без делегирования события: https://test-event-delegation-off.now.sh/
- С делегацией события: https://test-event-delegation-on.now.sh/
Без делегирования события - 3000 обработчиков событий
Мы прикрепляем обработчик onClick
к каждой кнопке.
// selectedItems = new Set([1, 2, 3])
// ids = [0, 1, 2, ..., 2999]
{ids.map((id) => (
<FancyButton
key={id}
id={id}
label={id}
isSelected={selectedItems.has(id)}
onClick={() => handleClick(id)}
/>
))}
- Смотрите полный исходный код здесь.
С делегацией события - 1 обработчик события
Здесь мы прикрепляем только один обработчик onClick
к родительскому div.
const handleClick = (event) => {
// Get id from button element
const id = event.target.id;
setSelectedItems((prevState) => new Set([...prevState, id]));
};
<div className="container" onClick={handleClick}>
{ids.map((id) => (
<FancyButton
key={id}
id={id}
label={id}
isSelected={selectedItems.has(id)}
/>
))}
</div>
Смотрите полный исходный код здесь.
Результаты
![Кто победит?](/static/storage/14999338431582137068689101385049184985.png)
Тест 1. Первая загрузка
![](/static/storage/322197019596925142979647261545404296629.png)
![](/static/storage/286228125616960730716811191584076938440.png)
Тест 2. Взаимодействие
![](/static/storage/37785542483167482973215617736488117048.png)
![](/static/storage/197122120352410261991795800316437798702.png)
Тест 3. Моментальный снапшот
![](/static/storage/250242295776362355471539429878674121127.png)
![](/static/storage/156982649015257651900842829617262268470.png)
Тест 4. Подсчет событий
![](/static/storage/168173513082436418737200203336380622088.png)
![](/static/storage/200991898822993231896988848036497649853.png)
Вывод
Мы не обнаружили никакой заметной разницы в производительности между ними. React уже оптимизирован в большинстве случаев, поэтому вы можете сосредоточиться на потрясающих функциях, которые вы отправляете. 🚀🚀🚀