React 合成事件 vs 原生事件：完整指南
本文系统梳理 React 合成事件（SyntheticEvent）的定义、工作机制与原生事件的差异，并给出常见问题、最佳实践与示例代码。
1. 什么是合成事件（SyntheticEvent）
合成事件是 React 对浏览器原生事件的跨浏览器封装。事件处理函数接收到的是一个统一的 SyntheticEvent 对象，提供与原生事件一致的常用接口（如 preventDefault、stopPropagation、target、currentTarget 等），并由 React 的事件系统统一调度与分发。[1]
2. 合成事件 vs 原生事件：核心区别
2.1 事件对象
- 合成事件：传入的是 SyntheticEvent。可通过
e.nativeEvent访问原生事件对象。React 17 起移除了事件池，不再需要e.persist()。[2][1] - 原生事件：传入的是浏览器的
Event/MouseEvent等。
2.2 事件委托与绑定位置
- 合成事件：采用事件委托，统一注册在根容器上，再根据 Fiber 树收集并按捕获/冒泡顺序执行监听。React 16 及更早版本委托在
document上；自 React 17 起委托在应用根容器（root）上，便于多 React 根并存与隔离。[3][1] - 原生事件：监听器绑定在哪个 DOM 节点就由浏览器事件流触发到哪里。
2.3 兼容性与行为一致性
- 合成事件：React 规范化不同浏览器的事件差异，保证一致的属性与行为。[1]
- 原生事件：不同浏览器实现存在差异，需要自行处理兼容。
2.4 批处理与调度
- 合成事件：在 React 18 中，处于 React 管理上下文里的更新会被自动批处理，统一调度更新时机，减少不必要的重新渲染。合成事件天然处于 React 的可控上下文，更容易享受这项优化。[4]
- 原生事件：直接
addEventListener不经过 React 事件系统；在 React 18 之前，异步回调/原生事件里的更新通常不会被自动批处理；React 18 使用createRoot后自动批处理覆盖更多场景。[4]
2.5 API 与使用体验
- 合成事件：API 与原生相似，语义由 React 统一；阻止默认与冒泡用法一致。支持
onClick、onChange、onScrollCapture等驼峰命名监听属性，且与 JSX 紧密集成。[1] - 原生事件：使用
addEventListener，按 DOM 事件模型工作。
3. 事件流与执行顺序（概念速览）
- 合成事件在根容器统一捕获/冒泡，React 会沿 Fiber 树收集并按阶段依次调用已注册的监听。
- 与页面上直接绑定的原生监听相比，合成事件的触发与执行顺序可能受 React 的委托与调度影响（尤其是并发特性下），需要以 React 事件系统为准。[5]
4. 代码示例
4.1 合成事件示例
4.2 原生事件示例
5. 与批处理（Batching）的关系（React 18）
- 处于 React 管理上下文（如合成事件、生命周期、部分异步回调）的状态更新在 React 18 会被自动批处理，多个
setState合并为一次渲染。需要立即同步刷新时使用flushSync。[4]
6. 常见问题（FAQ）
- Q：为什么
e.persist()在 React 17 后“不起作用”？- A：因为 Web 端已移除事件池机制，SyntheticEvent 不再复用，无需
persist()。[2]
- A：因为 Web 端已移除事件池机制，SyntheticEvent 不再复用，无需
- Q：合成事件里能拿到原生事件吗？
- A：可以，通过
e.nativeEvent访问原生Event对象。[1]
- A：可以，通过
- Q：原生事件监听和合成事件监听会互相影响吗？
- A：二者各自遵循所属系统的事件流。若你在同一 DOM 层级同时使用，需要注意触发顺序、阻止冒泡与默认行为的交互，以及并发/批处理带来的调度差异。[5]
7. 最佳实践
- 在组件内优先使用合成事件，以获得一致性、批处理与更好的跨浏览器兼容。
- 只有在需要依赖底层原生能力（如第三方库、特殊捕获阶段控制、非 React 管理的节点）时才使用原生事件。
- 避免混用造成顺序困惑；如需混用，明确事件阶段、谨慎使用
stopPropagation与preventDefault。
8. 一页速记（Cheat Sheet）
- 定义：合成事件 = React 封装的跨浏览器统一事件对象与分发系统。[1]
- 绑定位置：React 17 起在根容器上委托（旧版在
document）。[3] - 事件池：React 17 移除事件池，不再需要
e.persist()。[2] - 兼容性：合成事件屏蔽浏览器差异，API 一致。[1]
- 批处理：React 18 自动批处理更广泛场景，合成事件天然在其覆盖范围内。[4]