请解释 React 中事件绑定机制的工作原理，说明它是如何实现事件处理的？

回答思路

1. 【回答框架 1】React 事件绑定并非直接将事件处理器绑定到 DOM 元素上，而是通过事件委托的方式，将事件统一绑定到文档根节点上。在 React 17 之前，事件绑定在 document 上；React 17 之后，改为绑定到 React 应用的根容器上。
2. 【回答框架 2】React 实现了一套合成事件（SyntheticEvent）系统，它是对浏览器原生事件的跨浏览器封装。合成事件提供统一的接口，如 preventDefault、stopPropagation，并且解决了不同浏览器之间的兼容性问题。
3. 【回答框架 3】当用户触发事件时，事件会冒泡到绑定事件的根节点，React 在此处查找触发事件的 DOM 元素对应的 Fiber 节点，并构建从该 Fiber 节点到根节点的合成事件传播路径。然后，React 按照事件冒泡或捕获的阶段，调用路径上各个组件中对应的事件处理函数。
4. 【回答框架 4】在 React 17 之前，合成事件会在事件处理函数执行完后立即被回收，因此异步访问事件对象会得到 null。React 17 之后，合成事件实例不再被复用，但 React 官方文档仍建议在异步场景中保存需要的数据或调用 persist()（旧版本适用）。
5. 【回答框架 5】React 事件绑定的性能优势体现在：通过事件委托减少内存消耗，并且通过合成事件系统在事件处理中实现批量更新，提升渲染性能。但需要注意，React 事件系统中的 stopPropagation 只能阻止合成事件的传播，不能阻止原生事件的传播，除非调用 nativeEvent.stopImmediatePropagation。
6. 【关键点 1】React 事件通过事件委托绑定到根节点，而非每个元素单独绑定。
7. 【关键点 2】合成事件是跨浏览器的封装，提供统一接口。
8. 【关键点 3】事件传播路径基于 Fiber 树构建。
9. 【关键点 4】事件委托减少了内存开销并支持批量更新。
10. 【关键点 5】合成事件的 stopPropagation 与原生事件传播行为存在差异。
11. 【易错点 1】误以为 React 事件直接绑定在 DOM 元素上，实际上是委托到根节点。
12. 【易错点 2】异步访问事件对象时，在 React 17 之前需要使用 e.persist()，否则可能得到 null。
13. 【易错点 3】混淆合成事件和原生事件的 stopPropagation 行为，导致事件传播控制失效。