Объяснение событий на примерах

Обработка событий с помощью React очень похожа на обработку событий в элементах DOM.

Однако вместо вызова addEventListener, как в ванильном JavaScript, вы предоставляете прослушиватель событий при первоначальной визуализации элемента.

И есть несколько синтаксических отличий:

  • События React называются в camelCase (например, onClick), а не в нижнем регистре.
  • Используя JSX, вы передаете функцию в качестве обработчика события, а не строку.

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

Для этого React оборачивает собственные события браузера в свою собственную структуру, называемую SyntheticEvent, и передает их обработчикам событий React. React определил эти синтетические события в соответствии со спецификацией W3C, что обеспечивает им кроссбраузерную совместимость.

Поскольку SyntheticEvent React имеет тот же интерфейс, что и собственное событие браузера, вы можете использовать такие методы, как preventDefault() и stopPropagation().

Каждый SyntheticEvent объект имеет следующие атрибуты:

Когда вы определяете компонент на основе класса, обычно обработчиком событий является метод класса.

В приведенном ниже примере компонент Toggle отображает кнопку, которая позволяет пользователю переключаться между состояниями «ВКЛ» и «ВЫКЛ».

Метод handleClick() изменяет состояние всякий раз, когда происходит событие щелчка, а метод render() отображает текущее состояние в DOM:

В целях повышения производительности в React есть встроенная функция, которая «объединяет» его SyntheticEvents. Это означает, что после вызова обработчика событий все свойства event.target сбрасываются на null.

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

Это отличный пример миссии React - быть СУХИМ, модульным и многоразовым.

Благодаря пулу событий браузеру не нужно выделять память для нового объекта для каждого экземпляра события. Вместо этого он будет использовать один и тот же объект события в памяти для всех экземпляров события.

После завершения работы обработчика событий ключи объекта события остаются на своих местах, но значения каждого ключа сбрасываются на ноль. Это освобождает место в памяти, но также означает, что значения выполненного события теряются.

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

К моменту выполнения асинхронной функции, такой как setState(), она попытается получить доступ к свойствам события, например event.currentTarget.value, и, как мы видели, все свойства объекта события были сброшены на null, поэтому возвращаемое значение будет ... null. О, нет!

Скорее всего, вы столкнетесь со знакомой ошибкой, например Uncaught TypeError: Cannot read property ‘data’ of null.

Чтобы предотвратить объединение объекта события в пул и, следовательно, обнуление, мы вызываем event.persist() в начале функции.

Вызов этого метода удалит SyntheticEvent из пула, и объект события не будет повторно использован последующими событиями DOM; это позволяет асинхронно сохранять ссылки на событие.

В качестве альтернативы event.persist() вы можете хранить нужные данные в переменной (например, const pug = event.target).

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

Спасибо за прочтение!