Проброс данных в onClick событие в React.js: решение

Быстрый ответ

<button onClick={() => handleEvent(value)}>Нажми на меня</button>

В данном примере используется стрелочная функция для передачи value в handleEvent, при этом сохраняется контекст вызова this.

Повышаем эффективность обработчика onClick

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

// Оптимальный подход
const handleClick = useCallback(() => handleEvent(value), [value]);

Используем подкомпоненты

Чтобы упростить компонент, можно использовать подкомпоненты, которые получают props и управляют событиями, делая родительский компонент компактнее и ограничивая перерисовку только компонентами, которым это в самом деле необходимо.

Подробнее об этом расскажет наш спикер на видео

Избегаем лишних ререндерингов благодаря мемоизации

При использовании сложных компонентов целесообразно использовать мемоизацию, применяя React.memo или создавая собственные хуки. Это поможет избавиться от ненужных перерендеров при неизменных входных данных.

Трюки и оптимизация обработчиков событий

Создание привязанных обработчиков

В классовых компонентах привяжите обработчики событий в конструкторе, чтобы контекст this соответствовал экземпляру компонента:

constructor(props) {
  super(props);
  // Стабильная привязка
  this.handleEvent = this.handleEvent.bind(this);
}

Применение каррирования в обработчиках событий

Для создания функций высшего порядка, которые можно вызывать c объектом события, используйте каррирование:

const handleEvent = value => event => {
  // Применение каррирования
};

Использование атрибутов данных и делегирование

Для передачи дополнительных данных в обработчики событий используйте атрибуты data-*, вместо встраивания функций:

<button data-value={value} onClick={handleEvent}>Нажми на меня</button>

После этого в handleEvent получите value, обратившись к event.currentTarget.dataset.value.

Присваивание ключей элементам списка

Предоставите элементам списка уникальные ключи для улучшения производительности рендеринга и упрощения идентификации элементов.

Визуализация

Рассмотрите обработчик событий как оркестр, а метод — как симфонию:

До нажатия:
Оркестр 🎶 : Настроен и готов
Симфония🎵: В ожидании

После нажатия:
Оркестр 🎶 : Получает ноту '🔊'
Симфония🎵: Играет ноту '🔊'

При нажатии на кнопку функция с необходимым аргументом активируется:

<button onClick={() => this.playSymphony('🔊')}>Играть симфонию</button>

Архитектура и структура кода

Выделяйте логику обработки событий и пользовательский интерфейс для улучшения поддерживаемости и читабельности кода. Обработчики должны быть определены рядом с компонентами, для которых они предназначены.

Обработка сложных сценариев

В сложных компонентах, например, таблицах, используйте уникальные методы для обработки различных элементов onClick, передавайте колбэки и отражайте структуру интерфейса.

Четкое разграничение ролей в формах

При работе с формами используйте handleChange для управления различными полами ввода. Централизуйте управление состоянием, чтобы упростить обработку событий.

Паттерны для повторного использования и повышения производительности

Боремся с дублированием кода

Избавляйтесь от дублирования и выносите часто используемые участки кода в отдельные компоненты для повышения производительности и облегчения повторного использования.

ESLint для элегантности и совершенства

Пользуйтесь плагином ESLint-plugin-react для следования лучшим практикам обработки событий.

Методы в рендеринге

Стремитесь избегать создания новых экземпляров функций при итерации или рендере компонентов. Используйте вместо этого ссылки на методы и каррирование обработчиков событий для обеспечения стабильности функций между перерендерами.

Полезные материалы

1. Handling Events – React — подробная документация по обработке событий в React.
2. Pass a Parameter Through onClick in React – Upmostly — подробное руководство о том, как передавать параметры через onClick.
3. React Function Components — обзор функциональных компонентов в React и их обработчиков событий.
4. Passing Functions to Components – React — руководство по передаче функций и работе с this в React.
5. javascript – React js onClick can't pass value to method – Stack Overflow — обсуждение проблемы onClick в React на Stack Overflow.
6. Using Arrow Functions to avoid binding this in React | by Joseph Spinelli | Medium — статья об использовании стрелочных функций для обеспечения контекста в React.