addEventListener与React内置onMouseEnter/onMouseLeave的差异、性能及可靠性对比

一、核心区别 #

1. 事件体系本质不同 #

• React内置的onMouseEnter/onMouseLeave属于合成事件：React自行封装的事件系统，所有合成事件都会被委托到根容器（React 17+）或document（React 16及更早）上统一处理，而非直接绑定在DOM元素上。
• 通过addEventListener绑定的是浏览器原生DOM事件：直接绑定到目标DOM元素上，遵循浏览器原生的事件捕获、冒泡机制。

2. 事件触发顺序有差异 #

原生DOM事件会优先于React合成事件触发。比如同时绑定两种事件，原生的mouseenter会先执行，之后才会触发React的onMouseEnter——因为合成事件是在事件冒泡到根容器/document时才被处理。

3. 事件对象不同 #

• 合成事件的event是React封装的SyntheticEvent，它模拟了原生Event的API，但有专属特性：比如调用stopPropagation()只会阻止合成事件内部的冒泡，不会影响原生事件的传播；且React会自动复用SyntheticEvent对象以优化性能。
• 原生事件的event是浏览器提供的原生Event对象，完全遵循浏览器的事件规范。

4. 绑定与清理的方式不同 #

• React合成事件：组件渲染时自动完成绑定，组件卸载或重新渲染时会自动清理旧的事件回调，无需手动处理。
• 原生DOM事件：需要在useEffect中手动绑定，且必须手动编写清理函数（在useEffect的返回值中调用removeEventListener），否则会导致内存泄漏，或因组件多次渲染重复绑定事件，引发重复触发的问题。

二、性能差异 #

两种方式的性能差异在常规业务场景下几乎可以忽略，但有几点细节需要注意：

1. 事件委托的优势：React合成事件通过事件委托减少了DOM上的事件绑定数量，当页面存在大量需要绑定事件的组件时，合成事件的内存占用会略优于逐个绑定的原生事件。
2. 原生绑定的隐患：如果像示例中那样，useEffect未添加依赖项且未清理事件，每次组件渲染都会绑定新的事件回调，导致同一元素上存在多个重复的事件监听，不仅浪费内存，还会引发多次触发的问题，这时候性能会明显下降。
3. 合成事件的回调创建：如果给onMouseEnter传入箭头函数（如示例），每次渲染都会创建新的函数实例，但React内部会通过事件委托机制复用底层的DOM事件绑定，只是更新回调引用，性能损耗远低于重复绑定原生事件。

三、可靠性对比 #

React内置合成事件的可靠性更高，原因如下：

1. 跨浏览器兼容性：React已经处理了不同浏览器之间的事件差异（比如某些浏览器对事件名称、事件对象API的差异），使用合成事件无需自己做兼容处理。
2. 自动清理机制：组件卸载时，React会自动清理合成事件的回调，不会出现内存泄漏或无效事件触发的问题；而原生事件如果忘记编写清理函数，组件卸载后DOM元素若仍存在（比如被其他代码引用），事件会继续触发，可能引发报错。
3. 与React生命周期的适配：合成事件完全遵循React的组件生命周期，比如在组件更新时会自动更新事件回调，无需手动处理绑定时机；原生事件则需要开发者自己确保绑定/清理与组件生命周期同步，容易出错。

修正后的原生事件绑定示例 #

如果一定要使用原生事件绑定，需要补充清理逻辑并控制绑定时机：

import React, { useEffect, useRef } from 'react';

export const Component = () => {
  const divRef = useRef<HTMLDivElement>(null);

  // 提取回调函数，避免每次渲染创建新实例
  const handleMouseEnter = () => {
    console.log('native mouse enter');
  };

  const handleMouseLeave = () => {
    console.log('native mouse leave');
  };

  useEffect(() => {
    const currentDiv = divRef.current;
    if (currentDiv) {
      currentDiv.addEventListener('mouseenter', handleMouseEnter);
      currentDiv.addEventListener('mouseleave', handleMouseLeave);
    }

    // 清理函数：组件卸载或依赖变化时移除事件监听
    return () => {
      if (currentDiv) {
        currentDiv.removeEventListener('mouseenter', handleMouseEnter);
        currentDiv.removeEventListener('mouseleave', handleMouseLeave);
      }
    };
  }, []); // 空依赖数组，仅在组件挂载时绑定一次

  return (
    <div 
      onMouseEnter={() => console.log('on mouse enter react')} 
      onMouseLeave={() => console.log('on mouse leave react')}
      ref={divRef}
    />
  );
};

内容的提问来源于stack exchange，提问作者undefined-mind