React 的事件机制是怎样的？合成事件是什么？

1. 合成事件（SyntheticEvent）的核心概念

React 并不直接将事件处理函数绑定到 DOM 节点上，而是基于原生事件封装了一套跨浏览器兼容的事件系统，称为合成事件（SyntheticEvent）。当你在 JSX 中写 onClick={handler} 时，传递的并不是原生 DOM 事件，而是 React 封装的统一事件对象。

2. 事件委托机制

React 将所有事件统一委托到应用的根容器（React 17+ 为 #root 节点，React 17 之前为 document）进行监听，而非在每个 DOM 元素上单独绑定监听器。这种机制减少了内存开销，并解决了不同浏览器之间的事件行为差异问题。

3. 事件执行顺序（React 17+）

以点击事件为例，完整的执行顺序为：原生捕获阶段（document → root → div → button）→ React 合成捕获阶段（父组件捕获 → 子组件捕获）→ React 合成冒泡阶段（子组件冒泡 → 父组件冒泡）→ 原生冒泡阶段（button → div → root → document）。

4. 事件池（Event Pooling）的变更

React 16 及更早版本中，合成事件对象会被放入"事件池"中复用，在异步回调（如 setTimeout）中访问事件字段会遇到空值，需调用 e.persist() 保留事件对象。React 17+ 已彻底废弃事件池机制，合成事件对象在事件处理函数执行完毕后即被垃圾回收，可在异步代码中安全访问。

5. 与原生事件的混用注意事项

在 React 中手动绑定原生事件（如 addEventListener）时，需在组件卸载前通过清理函数移除监听，否则会造成内存泄漏。合成事件和原生事件混用时，需清楚两者的执行顺序差异，避免出现预期外的交互行为。