React和原生事件的区别

一、核心差异对比表

维度	原生事件	React 事件
绑定语法	HTML 属性（`onclick`）或 DOM API（`addEventListener`）	JSX 中使用驼峰式属性（`onClick`）
绑定位置	直接绑定到具体 DOM 元素	统一委托到根节点（React 17 及以前到 `document`，React 18 到容器）
事件对象	原生 `Event` 对象，不同浏览器实现有差异	合成事件 `SyntheticEvent`，封装原生事件并抹平浏览器差异
传播机制	完整的捕获 → 目标 → 冒泡三阶段	表面只有冒泡，捕获需显式声明（如 `onClickCapture`），React 18 支持完整阶段
阻止传播	`event.stopPropagation()` 阻止整个 DOM 树的传播	仅阻止合成事件传播，不影响原生事件
默认行为	`event.preventDefault()` 或 HTML 中返回 `false`	只能使用 `event.preventDefault()`
this 指向	默认指向 DOM 元素，可通过 `bind`、箭头函数修改	默认 `undefined`，需手动绑定（构造函数、箭头函数或类属性）
触发顺序	按 DOM 树层级依次触发	原生事件总是先触发，合成事件在冒泡到根节点后触发
性能优化	大量绑定时可能导致内存开销大	事件委托 + 事件池（复用事件对象），减少监听器数量和内存占用
兼容性	需处理浏览器差异（如 IE 的 `attachEvent`）	统一 API，自动处理兼容性

二、关键机制详解

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>

点击按钮的触发顺序：

原生 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 移除了事件池，可直接异步访问。

四、总结

特性	原生事件	React 事件
优势	直接控制 DOM，适合复杂交互场景	跨浏览器一致性，性能优化，代码简洁
劣势	兼容性差，大量绑定时性能问题	抽象层级高，特殊场景需结合原生事件
适用场景	自定义滚动、拖拽等复杂 DOM 操作	组件内交互、表单处理等常规场景