ReactJS - параметризованные обработчики событий
Довольно часто требуется передавать параметры обработчикам событий пользовательских компонентов React. Есть несколько способов добиться этого с помощью ES6 в зависимости от того, нужна ли нам ссылка на событие или нет.
Использование функции привязки
Мы можем определить обработчик событий и привязать его к this с помощью функции JavaScript Function.prototype.bind().
Если нам нужно передать пользовательские параметры, мы можем просто передать их в вызов привязки. SyntheticEvent будет передано обработчику как второй параметр.
Функция вызова bind в опоре JSX, как указано выше, будет создавать новую функцию при каждом рендеринге. Это плохо для производительности, так как приведет к тому, что сборщик мусора будет вызываться больше, чем необходимо. Это также может вызвать ненужные повторные отрисовки, если новая функция передается в качестве опоры компоненту, который использует проверку равенства ссылок на опоре, чтобы определить, следует ли ей обновляться.
Чтобы избежать создания новой функции при каждом рендеринге, мы можем привязать функцию в конструкторе.
Теперь нам не нужно связывать функцию при указании обработчика события в строке 13. Однако недостатком здесь является то, что мы не можем передать динамическое значение для параметра.
Использование функции стрелки ES6
Звонить bind каждый раз раздражает. Чтобы избежать вызова bind, мы можем использовать стрелочную функцию ES6, которая автоматически связывает функцию с this.
Мы также можем передать дополнительные параметры обработчикам событий.
Проблема с обоими приведенными выше синтаксисами заключается в том, что каждый раз при рендеринге компонента создается другой экземпляр обратного вызова, как и в случае с функцией bind.
Чтобы избежать создания нового экземпляра обратного вызова при каждом рендеринге, мы можем использовать синтаксис инициализатора свойств для правильного связывания обратных вызовов.
Чтобы передать параметры обработчикам событий при использовании синтаксиса инициализатора свойств, нам нужно использовать каррирование.
Обратите внимание, что каррирование приводит к созданию нового экземпляра для каждого вызова.
Заключение
При всех вышеперечисленных подходах использование стрелочной функции с каррированием кажется самым чистым и кратким (хотя и не самым эффективным) способом определения обработчиков событий, принимающих параметры, определенные пользователем.
Я хотел бы услышать ваши комментарии, предложения или вопросы по вышеуказанным подходам.
