面试官提问：React 的事件机制（合成事件）是什么？为什么要这么设计？React 17 之后有什么重大变化？
💡 核心回答技巧
你需要理清 “合成事件 (SyntheticEvent)” 与 “原生事件” 的关系。重点在于：事件委托、内存优化、跨端兼容。
1. 什么是合成事件 (SyntheticEvent)？
React 并不是将事件直接绑定在真实的 DOM 节点上，而是通过一个中间层来处理，这个中间层就是合成事件。
- 当你在 JSX 中写
onClick={handleClick}时，React 并没有给这个按钮添加addEventListener。
2. 为什么要使用合成事件？
- 性能优化（事件委托） ： React 利用了事件冒泡的特性，将所有的事件都绑定在根节点（React 17+ 是渲染容器节点，16 是
document）上。这样无论你有多少个按钮，实际上只在顶部绑定了一个监听器，极大减少了内存开销。 - 抹平浏览器差异： 不同浏览器对事件对象的属性定义不同。React 封装了一套统一的接口，让你在 Chrome 和 IE 下写的代码表现一致。
- 更好的跨端能力： 合成事件与底层 DOM 脱离，这使得 React 逻辑可以更容易地移植到 ReactNative 等非浏览器环境。
3. React 17 之后的一个关键变化
这是一个高频考点，很多老教程还没改过来：
- React 16 及之前：事件委托在
document上。 - React 17/18/19：事件委托在 Root Container（即
ReactDOM.render挂载的那个 div）上。
为什么改这个？ 主要是为了支持多版本 React 共存。如果都挂载在 document 上，当页面上有两个不同版本的 React 应用时，它们的事件系统会互相干扰。挂载在各自的 Root 节点下，就能实现真正的环境隔离。
4. 混合使用的坑：原生事件与合成事件
如果你在同一个组件中既用了 onClick（合成），又用了 window.addEventListener('click')（原生）：
- 执行顺序：原生事件先执行，合成事件后执行。
- 阻止冒泡：在合成事件中使用
e.stopPropagation()只能阻止 React 内部的事件冒泡，无法阻止原生事件（因为原生事件在到达根节点之前就已经触发了）。
🌟 总结
“React 合成事件是一套基于事件委托的机制，它通过将事件统一绑定在根容器上，实现了性能优化和跨平台兼容。在 React 17 后，委托位置从
document移到了root，解决了多应用共存的冲突问题。”
