这几天一直在我的脑海里。
根据文档，React 具有合成事件系统，它是一个a cross-browser wrapper around the browser's native event. 通过文档，我的理解是否正确，自定义（合成）事件系统与效率无关，而是与跨浏览器兼容性有关。
换句话说，React 仍然将事件附加到元素，而不是在父元素上更有效的事件委托方法？
我也在 Firefox Inspector 中注意到了这一点，这引起了最初的好奇心。
问这个问题的原因是我正在开发一个应用程序，用户可以选择一千个元素并在屏幕上拖动它们，因此最终会出现事件委托。
好吧，你可能已经自己想通了一切，但当我问自己同样的问题时，我想我会把它留在这里，以防其他人不仅对使用React感到好奇，而且对它的工作原理感到好奇。
所以，我不完全确定你的问题（尤其是“将事件附加到元素”部分）但是：
因此，您首先需要将事件带到虚拟 DOM，在那里计算您的更改并将它们分派到虚拟 DOM 中的组件表示，然后将相关更改返回到 DOM 中以适当地反映。
将更改传递到虚拟 DOM 是由顶级委托有效完成的。这意味着 React本身会侦听某个document级别的所有事件。这也意味着从技术上讲，您的所有事件甚至在进入 React 特定代码之前都要经过一个捕获 + 冒泡循环。我无法说出这在性能方面意味着什么，因为您确实“失去”了与第一次 DOM 遍历相关的时间，但另一方面，您将在虚拟 DOM 中进行所有更改，这比执行它们要快在真实的DOM中...
最后，SyntheticEvent确实是一个包装器，旨在减少跨浏览器的兼容性问题。它还引入了池化，通过减少垃圾收集时间使事情变得更快。此外，由于一个本机事件可以生成多个SyntheticEvent，因此从技术上讲，它可以让您轻松创建新syntheticTap事件（例如，如果您依次接收本机和本机，touchStart则可以发出事件touchEnd）。
我在这里写了一篇有更多细节的帖子。它远非完美，它们可能有些不精确，但它也许可以为您提供有关该主题的更多信息。