Объяснение событий на примерах
Обработка событий с помощью 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
в переменной, мы можем сохранить доступ к этим данным без необходимости доступа к цели через фактический объект события.
Спасибо за прочтение!