DevGang
Авторизоваться

Должен ли я использовать делегирование событий в React?

Делегирование событий - это метод оптимизации производительности в мире Javascript. Допустим, у вас есть неупорядоченный список <ul> с 1000 элементами списка, и вы хотите что-то делать при каждом нажатии элемента списка. При подходе делегирования событий вместо добавления одного обработчика событий для каждого из дочерних элементов вы добавляете только 1 onclick к родительскому элементу <ul>. Это аккуратный подход. 

Должен ли я использовать делегирование событий в React?

Краткий ответ: «Нет». Это не дает вам заметного выигрыша в производительности. Причина в том, что React уже проводит внутреннюю оптимизацию производительности. 

Тест производительности

Я хотел проверить это сам. Итак, я создал тестовый проект с 3000 кнопок. Когда кнопка нажата, мы меняем ее состояние на «Выбрано» в родительском контейнере, и цвет фона меняется.

Вы можете проверить две демонстрации здесь. 

  1. Без делегирования события: https://test-event-delegation-off.now.sh/
  2. С делегацией события: 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>

  Смотрите полный исходный код здесь.  

Результаты

Кто победит?
Кто победит?

Тест 1. Первая загрузка

Тест 2. Взаимодействие

Тест 3. Моментальный снапшот

Тест 4. Подсчет событий

Вывод

Мы не обнаружили никакой заметной разницы в производительности между ними. React уже оптимизирован в большинстве случаев, поэтому вы можете сосредоточиться на потрясающих функциях, которые вы отправляете. 🚀🚀🚀

Источник:

#React
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу