React 合成事件

合成事件原理： https://7km.top/main/synthetic-event

React 使用合成事件（Synthetic Events）主要是为了在跨浏览器环境中统一处理事件系统，同时为开发者提供更高效、可控的事件管理方式。以下是合成事件存在的背景以及其优势和机制。

什么是合成事件？

合成事件是 React 为了解决浏览器原生事件的不一致性，基于 W3C 规范对事件模型的一种封装。它模拟了浏览器的原生事件行为，但提供了统一的跨浏览器接口，并在 React 的虚拟 DOM 层面进行了优化。

合成事件的特点：

• 跨浏览器统一性：屏蔽了不同浏览器对事件行为的实现差异。
• 高效性：通过事件委托机制减少了内存占用和性能开销。
• 可控性：事件处理与 React 的生命周期和更新机制紧密结合。

为什么需要合成事件？

1. 跨浏览器兼容性

不同浏览器对事件模型的支持有细微差异，例如：

• 事件的命名不同（如 mousewheel 与 DOMMouseScroll）。
• 一些事件属性（如 event.target 和 event.srcElement）的行为不一致。

合成事件对这些差异进行了统一封装，开发者只需关心标准化的 API，而不用手动处理浏览器差异。

2. 事件委托机制

合成事件使用事件委托（Event Delegation），即所有的事件监听器都绑定到应用的根节点（如 document 或 root 节点），而不是绑定在每个具体的 DOM 元素上。

好处：

• 减少内存开销：不需要为每个 DOM 节点单独注册事件监听器。
• 动态元素支持：即使新元素在事件绑定后动态插入，它们的事件也可以正确触发。
• 方便事件解绑：只需解绑根节点上的事件监听器即可。

3. 与虚拟 DOM 的集成

React 的事件系统运行在虚拟 DOM 层面，因此可以控制事件的触发时机和行为：

• 阻止事件冒泡后仍可以执行事件处理。
• 与 React 的更新机制结合，确保事件处理逻辑与组件状态保持一致。

4. 统一的事件行为

通过合成事件，React 提供了一组统一的事件 API，例如：

• event.preventDefault() 和 event.stopPropagation() 在不同浏览器中行为一致。
• 合成事件模拟了原生事件的接口，如 target、type、currentTarget 等，并封装了其他常用的属性。

5. 性能优化

合成事件通过事件池（Event Pooling）机制优化了内存管理：

• React 会重用合成事件对象，将事件对象在事件回调结束后释放，减少了频繁创建和销毁事件对象的性能开销。
• 注意：在需要异步访问事件对象时，开发者需调用 event.persist()，防止事件被释放。

合成事件的工作机制

1. 事件绑定

   • React 会将所有事件的监听器统一绑定到根节点，例如 document 或挂载的根 DOM 节点上。

2. 事件触发

   • 当浏览器触发一个事件时，React 的事件监听器会捕获该事件。
   • React 根据事件的目标元素（event.target）找到对应的 Fiber 节点，创建一个合成事件对象，并把事件，和节点加入到派发队列，等待在 fiber commit 阶段被派发

3. 事件对象

   • React 会创建一个合成事件对象，模拟原生事件，并提供一致的 API。

4. 事件池

   • React 使用事件池重用合成事件对象，优化性能。
   • 事件回调执行完成后，事件对象会被释放。

合成事件的优势总结

• 统一跨浏览器事件行为：解决了浏览器兼容性问题。
• 更少的内存开销：通过事件委托和事件池减少了事件绑定和对象创建的成本。
• 与虚拟 DOM 深度结合：可以轻松实现高效的事件处理，与 React 的生命周期紧密集成。
• 易用性：开发者可以直接使用标准化的事件 API，无需处理浏览器特定差异。

为什么有些场景需要绑定原生事件？

虽然合成事件有诸多优势，但也有一些场景下需要使用原生事件：

• 脱离 React 管控的 DOM 元素：如直接操作 document 或 window 的事件。
• 性能要求极高的场景：在极少数情况下，合成事件的封装可能带来一些性能开销。
• 第三方库的集成：与非 React 环境（如 jQuery 插件）协作时，可能需要直接使用原生事件。

在这些情况下，开发者可以通过 addEventListener 直接绑定原生事件。