React和原生事件的区别

一、核心差异对比表

二、关键机制详解

1. 事件委托机制

• 原生事件：
  每个元素需单独绑定监听器，大量元素时性能较差

  // 手动为每个按钮绑定事件
  document.querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', handleClick);
  });
  

• React 事件：
  所有事件统一委托到根节点，通过事件类型和目标元素匹配处理函数。

  // 所有按钮的点击事件最终由根节点的统一处理器分发
  <button onClick={handleClick}>Click</button>
  

2. 合成事件 SyntheticEvent

• 跨浏览器封装：
  React 将不同浏览器的原生事件封装为统一接口，例如：

  function handleClick(e) {
    e.preventDefault(); // 兼容所有浏览器的阻止默认行为
    console.log(e.target); // 标准化的目标元素
  }
  

• 事件池优化：
  React 复用事件对象以减少 GC 压力（React 17 及以前）：

  function handleClick(e) {
    setTimeout(() => {
      console.log(e.target); // React 17 及以前此处会失效，因事件对象已被重置
    }, 0);
  }
  

3. 事件传播差异

• 原生事件：

  预览

  <div onclick="console.log('原生冒泡')">
    <button onclick="console.log('原生目标')">Click</button>
  </div>
  

  传播顺序：button → div（冒泡阶段）。

• React 事件：

  <div onClickCapture={() => console.log('React 捕获')}>
    <button onClick={() => console.log('React 冒泡')}>Click</button>
  </div>
  

  React 18 传播顺序：div（捕获） → button（目标） → div（冒泡）。

4. 触发顺序细节

当同时存在原生和合成事件时：

<div 
  onClick={() => console.log('合成事件')} 
  onMouseDown={() => console.log('合成 mousedown')}
>
  <button 
    onclick="console.log('原生 click')" 
    onmousedown="console.log('原生 mousedown')"
  >Click</button>
</div>

点击按钮的触发顺序：

1. 原生 mousedown → 原生 click → 合成 onMouseDown → 合成 onClick。

三、特殊场景对比

1. 混合使用原生与合成事件

class App extends React.Component {
  componentDidMount() {
    // 手动绑定原生事件
    this.buttonRef.current.addEventListener('click', () => {
      console.log('原生事件');
    });
  }

  render() {
    return (
      <button 
        ref={this.buttonRef} 
        onClick={() => console.log('合成事件')}
      >Click</button>
    );
  }
}

• 原生事件先触发，合成事件后触发。
• 原生事件的 stopPropagation() 会阻止合成事件触发。

2. 事件池与异步访问

React 17 及以前复用事件对象，异步访问需提前保存属性：

function handleClick(e) {
  const target = e.target; // 必须提前保存
  setTimeout(() => {
    console.log(target); // 正确访问
    console.log(e.target); // React 17 及以前会失效
  }, 0);
}

React 18 移除了事件池，可直接异步访问。

四、总结