synthetic event react что это

Русские Блоги

Система событий React Event

Реагировать на события

React стандартизирует объект события, поэтому он будет иметь одинаковые свойства в разных браузерах.

Синтаксис привязки к событию: onClick =

Функция привязки событий

Касание происходит только на мобильных устройствах

onKeyPress да onKeyDown с onKeyUp Комбинация

В соответствии с копией, вырезать и вставить мы часто используем

onChange Может использоваться в полях ввода, переключателях, выпадающих списках, мы можем получать уведомления при каждом изменении содержимого onInput Использовать при вводе текста. onSubmit Он используется для ввода ввода всей формы и часто используется для запрета работы формы по умолчанию.

Класс элементов интерфейса

Событие onScroll будет запущено при запуске события прокрутки

События, вызываемые колесом мыши, амплитуда прокрутки монитора, ориентация прокрутки

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting

демонстрация

Пул событий

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

Объект события

Для v0.14 возврат false в обработчике событий не предотвратит всплытие события. Вместо этого в соответствующем сценарии приложения вызовите вручную e.stopPropagation() или e.preventDefault() 。

из их e Является ли объект события target Атрибут объекта события

(Следующее содержание в скобках)

Общие атрибуты

пузырьки (логическое) указывает, является ли событие пузырьковым

cancellable (логическое) указывает, можно ли отменить событие

currentTarget (DOMEventTarget) похож на Target, потому что событие может пузыриться, поэтому содержимое, выраженное двумя, отличается

defaultPrevented (логическое) указывает, запрещает ли событие поведение по умолчанию

eventPhase (число) указывает на стадию события

protectDefault () (void), соответствующий defaultPrevented, что означает, что поведение по умолчанию запрещено

stopPropagaTion () (void) соответствует пузырькам, что означает sh

timeStamp (число) timestamp, которое является событием, вызванным событием

тип (строка) Тип события

Уникальные свойства различных объектов событий

clipboardData (DOMDataTransfer) указывает полученные данные

altKey (логическое значение) указывает, следует ли нажимать клавишу Alt.

charCode (Number) представляет код символа клавиши, вы можете судить, какая клавиша нажата кодом

ctrlKey (булево) указывает, нужно ли нажимать клавишу ctrl

getModifierState (key) (function) указывает, нажата ли вспомогательная кнопка (вспомогательная кнопка является вспомогательной кнопкой, такой как NVC ctrl и shift), и может быть передана в коде клавиши, чтобы определить, нажата ли она

клавиша (строка) строка, нажатая клавиша

keyCode (Number) означает ключи, которые не являются символьными кодами

locale (String) указывает, что некоторые строки локализованы

местоположение (число) указывает местоположение

metaKey (логическое) представляет ключ выигрыша в системе win и соответствующий ключ команды в системе mac

repeat (булево) указывает, повторяется ли клавиша

shiftKey (логическое значение) указывает, нажата ли кнопка shift

which (Number) означает charCode и keyCode после обобщения

relatedTarget (DOMEventTarget) связанный объект фокуса

screenX (Number) Начало координат находится в верхнем левом углу дисплея

screenY (Number) Начало координат находится в верхнем левом углу дисплея

Чтобы событие касания вступило в силу, вызовите его перед рендерингом всех компонентов. React.initializeTouchEvents(true) 。

changeTouches (DOMTouchList) операция жеста судьи

targetTouches (DOMTouchList) определяет операцию жеста

штрихи (DOMTouchList) операция жеста судьи

События элемента интерфейса

деталь (номер) расстояние для прокрутки

интерфейс представления (DOMAbstractView), окно

deltaMode (Number) можно понимать как единицу движения

deltaX (число) фиксированное значение относительного расстояния перемещения оси X

deltaY (Number) Фиксированное расстояние перемещения оси Y

deltaZ (Number) Фиксированное значение относительного расстояния перемещения оси Z

Примеры

Прокрутка объекта события

События и состояния

Состояние не только реализует четкое соответствие внутренних результатов компонента, но также реализует взаимодействие между компонентом и пользователем, так что поведение пользователя и компонента тесно сочетается

this.setState устанавливает состояние

Примеры

Оригинальное объяснение React

SyntheticEvent

This reference guide documents the SyntheticEvent wrapper that forms part of React’s Event System. See the Handling Events guide to learn more.

Overview

If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:

As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.

Event Pooling

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

Supported Events

React normalizes events so that they have consistent properties across different browsers.

Источник

Handling Events

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:

For example, the HTML:

is slightly different in React:

Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly. For example, with plain HTML, to prevent the default form behavior of submitting, you can write:

In React, this could instead be:

Here, e is a synthetic event. React defines these synthetic events according to the W3C spec, so you don’t need to worry about cross-browser compatibility. React events do not work exactly the same as native events. See the SyntheticEvent reference guide to learn more.

When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.

When you define a component using an ES6 class, a common pattern is for an event handler to be a method on the class. For example, this Toggle component renders a button that lets the user toggle between “ON” and “OFF” states:

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick= , you should bind that method.

If calling bind annoys you, there are two ways you can get around this. If you are using the experimental public class fields syntax, you can use class fields to correctly bind callbacks:

This syntax is enabled by default in Create React App.

If you aren’t using class fields syntax, you can use an arrow function in the callback:

The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

Passing Arguments to Event Handlers

Inside a loop, it is common to want to pass an extra parameter to an event handler. For example, if id is the row ID, either of the following would work:

The above two lines are equivalent, and use arrow functions and Function.prototype.bind respectively.

In both cases, the e argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind any further arguments are automatically forwarded.

Источник

Events in React: What Do They Do? Do They Do Things?? Let’s Find Out!

In this story I’ll try to explain the way React handles events (as of version 16.8.6). The first part of the story is focused in the implementation details. I’ll try to explain the inner workings of the library based on my findings reading its source code. In the second part, I’ll talk about how those implementation details might affect the way you handle events in your applications.

Motivation for this story

Some weeks ago, while conducting a training session with a team of developers new to React, I was talking about synthetic events and their nuances when one of the attendants asked me a question about the way React handles events, internally. I then realized that, while from a library-user point of view I’m really confident on my knowledge, I don’t really know about the implementation details.

So here we are. In this story I’ll share with you my findings while trying to get a deeper understanding of events and event handling in React applications.

The source code

The best way to understand the inner workings of some library is by reading its code. When dealing with a library such big and complex as React, this can be a daunting task.

There is a lot going on when React renders an application into the DOM. In order to be able to find my way through the source code, I had to read some very high-level (and hopefully not totally outdated) descriptions of React and the Fiber architecture, and a very low-level series on React Fiber from Max Koretskyi aka Wizard.

A hidden gem

Top-level delegation

React handles (most of) the events in your application using a very common technique: event delegation. When you render something like:

React doesn’t attach a DOM event listener to the button node. Instead, it gets a reference to the DOM document root where it is rendering the component, and installs a DOM event listener there. In fact, React installs a single top-level event listener for each type of event. This happens when a component is mounted or updated.

Whenever a DOM event is fired, those top-level listeners initiate the actual event dispatching through the React application.

Synthetic events

React defines SyntheticEvents as a common interface which ”implement(s) the DOM Level 3 Events API by normalizing browser quirks”. These are the kind of events React applications produce and handle.

SyntheticEvents use a pooling mechanism (you can see its actual implementation in the source code) which has its own implications when dealing with them in your application (for more details on this you can read React SyntheticEvent reuse, a story by my colleague Ceci García García).

Handling a native event

Up until now, React has rendered your application to the DOM, setting some event listeners in the document root. And then something happens (say, the user clicks some button) and a native event is triggered. This will fire the top-level DOM event listener responsible for handling that event. This is a process with two steps:

Extracting the synthetic events

How does React get from a native event to its synthetic counterpart? That’s the responsibility of the EventPluginHub and its event plugins. Each plugin is a module (like SimpleEventPlugin or ChangeEventPlugin ) that knows which synthetic event(s) to produce in response to a native event.

Handling the synthetic events

Before we continue, I want you to focus for a second on the following example:

If you click the div, you get this in the console:

Remember that React is handling every click with a single event listener attached to the document root. There is no event listener attached to the individual div nodes in the DOM. So, how does the code above even work? How does React know that it has to invoke both of the callbacks, and in that order?

Well, it turns out that, after extracting a synthetic event, each event plugin also computes the list of event handlers to be invoked in response to that synthetic event (the list of “dispatches” in the source code jargon).

The plugins use a capture-and-bubble simulation to traverse the React components hierarchy corresponding to the native event target. For each component in the hierarchy, React looks for event handlers to call in the capturing and bubbling phases. When it finds an event handler, it “enqueues” a new dispatch.

Once all the synthetic events have been extracted and their respective list of dispatches computed, it’s time to run the event handlers. For each synthetic event, the list of its dispatches is iterated and the corresponding event handler executed (that is your code, at last! 😅), setting the currentTarget property to the right DOM node. React simulates event propagation control by stopping the iteration whenever the event’s stopPropagation method is called.

After executing the event dispatches, if the event was not persisted, it’s returned to the pool.

React event handling specifics

Now that we know how React “adapts” the native event system, we can finally understand the underlaying causes regarding some of the specifics about event handling in React applications.

Immediate propagation

When working with a DOM node, you can attach to it multiple event listeners for the same event:

But React elements accept a single prop, so you can only set one event handler:

This is why synthetic events don’t expose a stopImmediatePropagation method: the concept of immediate propagation of synthetic events makes no sense.

Propagation context

Synthetic events “regular” propagation can be stopped, though. This works like a charm while all your event handlers are executed in the context of the React application. But if you mix React event listeners with native ones, things can get tricky.

In the following example we use a custom hook to simulate the usage of a vanilla JavaScript library which adds some event listener to the DOM:

If you run this application and click the button, you will see this in the console:

As you can see, stopping the event propagation in the React “world” (calling stopPropagation on the synthetic event) does not prevent the global handler from executing. Why? Well, the global handler is installed in the top-level, just like the React top-level event handler. To prevent its execution you must call stopImmediatePropagation on the native event!

With this change (line 17 in the code snippet), everything works as expected and you get this in the console after clicking the button:

Event propagation through portals

Portals let you render part of your application “into a DOM node that exists outside the DOM hierarchy of the parent component”.

The documentation on portals has a specific section about event bubbling. It says that:

An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree.

This way your components can capture events bubbling from their children regardless of where they are rendered in the DOM.

I’ve always wondered how this works internally. Now that I know how React implements event propagation, I understand what’s happening: portals are React components which happen to render in different containers in the DOM, but their position within the React tree is the same as that of a “normal” component. And the capture-and-bubble algorithm used to simulate event propagation only cares about the React tree.

target vs currentTarget

DOM native events define two important properties:

React’s synthetic events also expose these two properties, which you can use in the same way as their native counterparts. React takes care of setting target and currentTarget to the right DOM node:

For a synthetic event, currentTarget will point to the DOM node corresponding to the React component handling the “delegated” event. But the native event will have currentTarget pointing to the document root! This is normal, as React is handling the application events in the top-level (using event delegation, in fact).

Parting notes and future work

While most of the applications will never have to deal with the subtleties discussed in this story, I myself have struggled many times before with these details while trying to solve event-related issues. Had I known back then about the way React implements the event system, I’d have avoided some random stopPropagation invocations 😅.

I’ve found this deep dive into the source code of React to be really challenging, but also really interesting. Thankfully, the official React documentation is an amazing resource to learn about the library, so you don’t need to read a single line of the source code in order to use it to build amazing stuff. But it’s always fun being able to learn about how things work if you want to. That’s the magic of open source 😄.

Источник

Synthetic Events in React

A persistent problem

Jun 6, 2019 · 5 min read

What are synthetic events and why do we need them?

How do events work in React?

To handle even t s, a browser’s Javascript API generally has an Event class, and every native event that triggers creates an instance of this class that gets passed as an argument to a callback function.

React, however, pools SyntheticEvent objects between all events, meaning that there is only one active SyntheticEvent object at a time. When an event is triggered, the properties of the SyntheticEvent object are set using the browser native event. The SyntheticEvent object is then passed to your callback function. Once the callback function is complete, the SyntheticEvent object will be nullified (all its properties will be reset to null ) so that it can be reused by the next event handler.

We could try to delve into why React events work this way but, essentially, this was a decision made by the React team for performance reasons, so we just have to roll with it.

An interesting side note — as well as only having one SyntheticEvent object, React only has one event listener. React employs top-level event delegation. Rather than attach an event listener to each DOM node that we specify, React creates a single, top-level event listener that can capture all native browser events. When we mount and unmount a component in which we have specified some event handling, this is just added to the internal mapping of the top-level event listener.

How can synthetic events be a problem?

Since the SyntheticEvent object is nullified once the callback function has completed, it can not be accessed asynchronously.

Here is a simple demo app to demonstrate:

This app has 2 divs:

The first says ‘I want this text’ and has an on-click event that console logs the div’s text and stores the event itself in state.

The second says ‘I don’t want this text’ and has an on-click event that logs the text of the target element of the event stored in state.

With a bit of CSS, it looks like this:

I’m storing the event in state because I want to retrieve some of its properties later. My expectation is that clicking the second div should access the event stored in state and console log the inner text of its target element: ‘I want this text’.

But this won’t work. If we want to store our event, we need to be aware that objects in Javascript are passed by reference, so all we are storing is a reference to the SyntheticEvent object. This means that the properties of the SyntheticEvent will not remain fixed. The initial problem we will encounter is that the data we might want to retrieve from the SyntheticEvent object later has been nullified.

Here we can see that clicking the first div sets the SyntheticEvent object in state. When we try to access the SyntheticEvent object through the React Developer Tools, we are bombarded with warnings. That is a warning for each property of the SyntheticEvent object, telling us that it has been nullified. As we scroll through the object, we can also see that the value of every property (except for functions) is now null.

The worse problem comes when other events trigger. Remember, the SyntheticEvent object is reused for all events and we have only stored a reference to it in state. This means that, when another event fires (for the duration of its callback) the event in our state will actually have its properties set to new values we don’t want.

Here we can see that, instead of logging the text of the first div as we’d intended, we’re getting the text of the second div. When we click on the second div, this triggers a new event whose properties React assigns to the SyntheticEvent object (including, importantly for this example, the target element). The callback function of the second div’s on-click event then looks at the event stored in state to find the inner text of its target. That target is now the second div and so it ends up logging its own inner text, rather than the text of the first div as we’d intended.

So how can we avoid this problem?

1. Cache the event data — This is the most obvious way, and you’re almost certainly already doing this anyway. Rather than save the event in state, we can pull out the data we need during the callback function and set that in state. For the demo app, that would look something like this:

2. Persist the event — If you use event.persist() during your callback function, React will maintains the SyntheticEvent object with its current properties and remove it from the pool. Instead of nullifying and reusing this SyntheticEvent object, React will create a new one to be used by any later events. We can apply that to our earlier code like so:

And now, our app should work like we wanted:

Источник

⚛️ Прокачиваем навыки React с помощью слушателей событий

Перевод публикуется с сокращениями, автор оригинальной статьи Stefan Metodiev.

Если вы участвовали в проектах на JavaScript в качестве фронтенд/бекенд разработчика, то вы должны быть хорошо знакомы с прикреплением событий к документу, элементу или объекту окна через встроенный модуль событий.

React создает уровень абстракции над основным модулем JavaScript, чтобы предоставить оболочку событий (Synthetic Event wrapper), с помощью которой можно получить доступ к элементам Virtual DOM и манипулировать ими. В большинстве случаев это все, что нужно для передачи функции одному из Synthetic Event обработчиков.

Статья поможет понять:

1. Как правильно добавлять, очищать и отслеживать слушателей

Прежде, чем погрузиться в код и реализацию, давайте проясним процесс добавления событий в React и JavaScript. Мы можем добавить слушателя в объекты окна, документы или элемент в коде.

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

Вот как это делается в функциональном компоненте:

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

Еще один способ убедиться, что слушатели находятся в нужных местах или успешно удалены – проверять их и контролировать. Сделать это можно в Chrome Dev Tools :

Когда мы открываем инструменты разработчика и переходим к некоему элементу (в нашем случае – к документу) можно видеть, что EventListener прикреплен к DOM, ожидая выполнения.

Подключено несколько слушателей

Если внимательно посмотреть на последний скриншот, можно увидеть события “ contextmenu ” и “ auxclick ”, добавленные из codesandbox в глобальное пространство имен событий.

2. Стратегии производительности и оптимизации

Еще раз подчеркнем, что во избежание каких-либо проблем со слушателями событий нужно правильно добавлять (на этапе монтажа компонента) и очищать их.

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

В методе addEventListener есть третий аргумент, позволяющий указывать дополнительные параметры, такие, как свойство once:

Свойство указывает, что listener должен быть вызван не более одного раза после добавления. Если оно принимает логическое значение true, то listener будет автоматически удален при вызове. В документации говорится, что опция автоматически удаляется после запуска слушателя, поэтому не нужно беспокоиться о ее очистке.

Еще один очень удобный флаг – passive option. С его помощью можно значительно улучшить производительность listener и сократить время отклика элементов. Вот как это выглядит:

В качестве эксперимента автор проверяет производительность слушателя с опцией и без. При обычном слушателе время выполнения составляет примерно 164мс, а с passive option, время выполнения упало до 116мс – на 30% эффективнее.

3. Создание кастомных listener

React предоставляет нам набор событий, но иногда может понадобиться более гибкое решение: обработать сложную анимацию, пользовательское скролл-событие, вызывающее изменения UI, или попытаться избежать перекрытия событий click в глобальном пространстве имен.

Мы всегда можем создать собственные события:

Большая часть работы сделана, но нам нужен еще один метод, который отправит созданное событие:

Теперь рассмотрим эту часть кода:

4. Использование традиционных реализаций

Использование слушателей событий в React – не то, чем можно регулярно злоупотреблять. Лучше использовать предоставляемый React по умолчанию Synthetic Event.

Представим ситуацию, когда необходимо вызвать action на «другой стороне» приложения, а передача нашего метода невозможна или реализация глобального состояния была бы излишней. В этом случае использование Event Listener можно считать правильным выходом из ситуации.

Источник