【 abstract 】

React synthesized events are an object that simulates all the capabilities of native DOM events in React. They are defined according to the W3C specification, are compatible with all browsers, and have the same interface as browser native events.

React Description Print the synthesized event object E and the native e.ativeEvent, respectively

React Event System Architecture

The React system can be divided into two parts: register and execute.

I. Registration:

// 
function enqueuePutListener(inst, registrationName, listener, transaction) {...var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
  1.finddocument
  var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
  2.Register events to register events todocumenton3.listenTo(registrationName, doc); Store events and put them in a transaction queue}Copy the code

React events are compatible with different browsers, so there is no need for users to consider browsers:

  listen: function listen(target, eventType, callback) {
    if(target.addeventListener) {add the native event to the target dom, which is passed abovedocumentOn this is the onlydocumentThis DOM node has the cause of the native event target.addeventListener (eventType, callback,false); . }else if (target.attachEvent) {
      target.attachEvent('on'+ eventType, callback); . }}Copy the code

Ii. Implementation:

Dispatchevents (React composite event bubbling mechanism)

function handleTopLevelImpl(bookKeeping) {
  1.Find the DOM and React Component triggered by the eventvar nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);
  var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(nativeEventTarget);

  2.Before performing an event callback, the current component iterates through all of its parent components. So you get this array rooted to, which is also the bubble order.var ancestor = targetInst;
  do {
    bookKeeping.ancestors.push(ancestor);
    ancestor = ancestor && findParent(ancestor);
  } while(ancestor); This order is the bubbling order, and we found that it cannot be stopped by stopPropagation'bubble'.for (var i = 0; i < bookKeeping.ancestors.length; i++) { targetInst = bookKeeping.ancestors[i]; ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent)); }}Copy the code

HandleTopLevel constructs composite events and executes them (depending on EventPluginHub)

1.Initialization time eventPlugin registered to EventPluginHub, different plugin structure of different types of synthetic events ReactInjection. EventPluginHub. InjectEventPluginsByName ({... Different plug-ins});2.The events in the event pool: EventPluginHub. EnqueueEvents (events);3.To handle the event queue, including: the pending before EventPluginHub. ProcessEventQueue (false);
Copy the code

[Mixed Demo of synthetic event and native Event]

Students who are new to React often mix with native events when react events are used. (This is not to criticize such mixed behavior, but to distinguish the execution difference between react time system and JS events in the mixed phase.) Here we use a small demo to feel the difference between the two implementations: Print the execution result:

React event, document mount event execution sequence:

[Significance of the existence of synthetic Events]

1. Unified Management (Document)

React events are centrally managed on document

2. Compatibility between different browsers

3. Reduce the performance cost of event creation and destruction (avoid frequent garbage collection mechanisms)

The use of react event queues for storage and extraction relieves the performance cost of dom element registration destruction

4. Take advantage of the property of the composite event bubbling from the Document

[Problems in composite events]

1. The impact of native events on react synthesized events when native events and synthesized events are used together

  • Preventing bubbling in native events prevents the React composite event from executing
  • The React composite event ban on bubbling does not apply to natives

2. After all event handlers in the event pool are called, all attributes are set to NULL

Ways to avoid:
  • e.persist()// Can prevent the event pool from clearing out events
  • React 17 will have changes such as deprecating event pools, and this phenomenon will not exist

3. When different versions of React components are nested, E.topPropagation does not work properly.

[Related references]

  • react.docschina.org/
  • Github.com/facebook/re…
  • React 17 is coming, a very special edition – Dreamembers – Blog Garden