请解释 React 的事件处理机制是如何工作的？

回答思路

1. 【回答框架 1】React 的事件机制是合成事件（SyntheticEvent），它是对浏览器原生事件的跨浏览器封装。React 17 之前事件委托到 document，17 开始委托到根容器。事件处理函数接收合成事件对象，它提供了统一的接口和属性。
2. 【回答框架 2】React 事件绑定的原理：在 JSX 中写 onClick 等，最终通过事件委托的方式绑定到根容器。当事件触发时，React 根据事件目标找到对应的组件实例，执行对应的处理函数。合成事件对象会在事件处理结束后被重置，因此异步访问事件对象需要调用 persist() 或提前存储所需属性。
3. 【回答框架 3】合成事件与原生事件的区别：合成事件是 React 自己实现的，具有跨浏览器一致性，而原生事件是浏览器提供的。在 React 中，事件处理函数默认绑定在根容器上，原生事件绑定在具体 DOM 上。执行顺序上，原生事件先触发，然后才是 React 的合成事件。
4. 【关键点 1】React 事件是合成事件，有跨浏览器一致性。
5. 【关键点 2】事件委托：React 17 之前委托到 document，17 之后委托到根容器。
6. 【关键点 3】合成事件对象是池化的，在事件处理结束后会被重用。
7. 【关键点 4】原生事件先于合成事件执行。
8. 【易错点 1】混淆原生事件和合成事件的执行顺序。
9. 【易错点 2】在异步回调中直接使用合成事件对象，必须 persist() 或提前提取数据。