reactjs 为什么React要监听所有事件?

pprl5pva  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(141)

我正在使用React 18的生产版本,我注意到大量的事件侦听器正在侦听id=“root”元素上的所有可以想象的操作。
所有这些都是有原因的吗?我很确定我没有申报。

htrmnn0y

htrmnn0y1#

这种行为不仅在react 18中存在,而且在react 17中也存在。在React=>17中,事件处理程序不再附加在文档级别。相反,它会将它们附加到呈现React树的根DOM容器**(id ='root'的div)**
在运行时,React初始化多个对象以了解如何处理事件侦听器。如果您检查react-dom.development.js文件,您会发现一个数组,其中包含所有已处理本机事件:

var simpleEventPluginEvents = ['abort', 'auxClick', 'cancel', 'canPlay', 'canPlayThrough', 'click', 'close', 'contextMenu', 'copy', 'cut', 'drag', 'dragEnd', 'dragEnter', 'dragExit', 'dragLeave', 'dragOver', 'dragStart', 'drop', 'durationChange', 'emptied', 'encrypted', 'ended', 'error', 'gotPointerCapture', 'input', 'invalid', 'keyDown', 'keyPress', 'keyUp', 'load', 'loadedData', 'loadedMetadata', 'loadStart', 'lostPointerCapture', 'mouseDown', 'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'paste', 'pause', 'play', 'playing', 'pointerCancel', 'pointerDown', 'pointerMove', 'pointerOut', 'pointerOver', 'pointerUp', 'progress', 'rateChange', 'reset', 'resize', 'seeked', 'seeking', 'stalled', 'submit', 'suspend', 'timeUpdate', 'touchCancel', 'touchEnd', 'touchStart', 'volumeChange', 'scroll', 'toggle', 'touchMove', 'waiting', 'wheel'];

你还可以找到一个函数,它在本地事件和事件处理程序属性之间进行Map:

function registerSimpleEvent(domEventName, reactName) {
      topLevelEventsToReactNames.set(domEventName, reactName);
      registerTwoPhaseEvent(reactName, [domEventName]);
    }
    function registerSimpleEvents() {
      for (var i = 0; i < simpleEventPluginEvents.length; i++) {
        var eventName = simpleEventPluginEvents[i];
        var domEventName = eventName.toLowerCase();
        var capitalizedEvent = eventName[0].toUpperCase() + eventName.slice(1);
        registerSimpleEvent(domEventName, 'on' + capitalizedEvent);
      } // Special cases where event names don't match.

      registerSimpleEvent(ANIMATION_END, 'onAnimationEnd');
      registerSimpleEvent(ANIMATION_ITERATION, 'onAnimationIteration');
      registerSimpleEvent(ANIMATION_START, 'onAnimationStart');
      registerSimpleEvent('dblclick', 'onDoubleClick');
      registerSimpleEvent('focusin', 'onFocus');
      registerSimpleEvent('focusout', 'onBlur');
      registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
    }

您可以查看此link以了解更多信息

相关问题