我正在使用React 18的生产版本,我注意到大量的事件侦听器正在侦听id=“root”元素上的所有可以想象的操作。所有这些都是有原因的吗?我很确定我没有申报。
htrmnn0y1#
这种行为不仅在react 18中存在,而且在react 17中也存在。在React=>17中,事件处理程序不再附加在文档级别。相反,它会将它们附加到呈现React树的根DOM容器**(id ='root'的div)**在运行时,React初始化多个对象以了解如何处理事件侦听器。如果您检查react-dom.development.js文件,您会发现一个数组,其中包含所有已处理本机事件:
react 18
react 17
React=>17
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以了解更多信息
1条答案
按热度按时间htrmnn0y1#
这种行为不仅在
react 18
中存在,而且在react 17
中也存在。在React=>17
中,事件处理程序不再附加在文档级别。相反,它会将它们附加到呈现React树的根DOM容器**(id ='root'的div)**在运行时,React初始化多个对象以了解如何处理事件侦听器。如果您检查react-dom.development.js文件,您会发现一个数组,其中包含所有已处理本机事件:
你还可以找到一个函数,它在本地事件和事件处理程序属性之间进行Map:
您可以查看此link以了解更多信息