React Mastery Series - Day 9: Event Handling in React - Создание интерактивных приложений
React Mastery Series – Day 9: Event Handling in React – Making Applications Interactive
Добро пожаловать в серию React Mastery! В предыдущей статье мы рассмотрели React Rendering и жизненный цикл компонентов. Мы узнали: что заставляет компонент переосмыслить работу примирения React Разница между рендерингом и обновлениями DOM Как обрабатывается поведение жизненного цикла с помощью Hooks Now Давайте узнаем, как приложения React реагируют на взаимодействия пользователей. Каждое современное приложение зависит от событий: Нажатие кнопок Ввод в формы Выбор опций Представление данных Перетаскивание и сброс элементов Клавиатура ярлыков React обеспечивает мощную систему событий для обработки всех этих взаимодействий. Что такое обработка событий? Обработка событий - это процесс реагирования на действия пользователя в приложении. Пример: Пользователь нажимает кнопку «Перевести деньги»: События в традиционном JavaScript.
Добро пожаловать в серию React Mastery! В предыдущей статье мы рассмотрели React Rendering и жизненный цикл компонентов. Мы узнали: что заставляет компонент переосмыслить работу примирения React Разница между рендерингом и обновлениями DOM Как обрабатывается поведение жизненного цикла с помощью Hooks Now Давайте узнаем, как приложения React реагируют на взаимодействия пользователей. Каждое современное приложение зависит от событий: Нажатие кнопок Ввод в формы Выбор опций Представление данных Перетаскивание и сброс элементов Клавиатура ярлыков React обеспечивает мощную систему событий для обработки всех этих взаимодействий. Что такое обработка событий? Обработка событий - это процесс реагирования на действия пользователя в приложении. Пример: Пользователь нажимает кнопку «Перевести деньги»: События в традиционном JavaScript против React Вы вручную: Найдите элемент DOM Attach Слушатели событий Управление обновлениями React React прикрепляет события непосредственно внутри JSX. React управляет внутренней регистрацией событий. React Event Syntax React events use: camelCase naming JSX expressions Function references HTML: React: Notice: Handling Click Events Example: When the user clicks: Passing Functions vs Calling Functions Очень распространенная ошибка новичка. неправильный Это выполняется немедленно во время рендеринга. Правильная реакция вызывает функцию только тогда, когда происходит событие. Передача Аргументов Организаторам Мероприятий Иногда необходимо передать дополнительную информацию. Пример: Неправильно: правильно: функция стрелки задерживает выполнение до нажатия кнопки. Event Object React автоматически предоставляет объект события. Пример: Использование: Объект события содержит информацию о: Целевой элемент Событие типа Мыши Положение Клавиатура детали Форма информация Синтетические события в React React не использует непосредственно события браузера. Вместо этого React предоставляет обертку под названием SyntheticEvent Example: Output: Почему React использует синтетические события? Преимущества: • Последовательность кросс-браузера • Один и тот же API в браузерах • Лучшее управление событиями