在 React 中处理事件时，与直接在 HTML 中使用原生事件相比，主要有哪些不同？请说明其背后的机制。

回答思路

1. 【回答框架 1】React 事件通过合成事件（SyntheticEvent）封装了原生事件，提供跨浏览器一致的接口和属性，并统一了事件对象的行为。
2. 【回答框架 2】合成事件挂在根容器上，通过事件委托机制监听所有事件，而不是直接绑定到具体 DOM 元素，这有助于提升性能和统一管理。
3. 【回答框架 3】事件处理函数中的 this 在 React 中默认不会绑定到组件实例，需要手动绑定或使用箭头函数，而原生事件处理函数中的 this 指向触发事件的元素。
4. 【回答框架 4】React 合成事件在冒泡阶段触发，不支持捕获阶段的监听（除非显式使用 capture 属性），而原生事件可以自由选择在捕获或冒泡阶段监听。
5. 【回答框架 5】React 合成事件对象在事件处理完成后会被复用和重置，因此不能异步访问其属性，需通过 e.persist() 或保存所需数据来避免这个问题。
6. 【关键点 1】React 合成事件是对原生事件的封装，提供跨浏览器一致性。
7. 【关键点 2】React 使用事件委托，所有事件都绑定在根容器上。
8. 【关键点 3】React 事件处理函数中的 this 需要手动绑定。
9. 【关键点 4】合成事件对象被池化，异步使用前需要 persist()。
10. 【关键点 5】React 事件默认在冒泡阶段触发，原生事件支持捕获阶段。
11. 【易错点 1】错误地认为 React 事件是直接绑定在 DOM 元素上，实际上是通过事件委托挂载到根容器。
12. 【易错点 2】在异步回调中直接使用合成事件对象，可能导致属性被重置而获取不到值。
13. 【易错点 3】忽略 React 中 this 的绑定问题，导致事件处理函数中的 this 指向 window 或 undefined。