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