理解React的综合事件系统

Question

现在已经有几天了。

根据文档，React有合成事件系统 ，它是a cross-browser wrapper around the browser's native event 。 通过文档，我的理解是正确的，自定义（合成）事件系统，不是效率，而是跨浏览器兼容性。

换句话说，React仍然将事件附加到元素而不是父元素上更有效的事件委派方法？

我在Firefox Inspector中也注意到了这一点，这引起了最初的好奇心。

提出问题的原因是我正在开发一个应用程序，用户可能会选择一千个元素并将它们拖动到屏幕上，因此最终会出现事件委托。

Answer 1

好吧，你或许已经想到了自己的一切，但是当我问自己同样的问题时，我想我会留下这个，以防其他人好奇不仅使用 React而且还了解它是如何工作的 。

所以，我不完全确定你的问题（特别是“将事件附加到元素”部分）但是：

• React就是虚拟DOM。 顾名思义，它建立在 DOM的“真实”环境之上 。 因此， 一切都发生在抽象层中 ，包括事件处理。
• 事件出现在他们的“自然”环境中，所以DOM或本机（取决于您使用的反应的风味）

因此，您首先需要将事件带到虚拟DOM，在那里计算您的更改并将它们分派到虚拟DOM中组件的表示，然后将相关更改重新下载以适当地反映在DOM中。

顶级委派有效地完成了对虚拟DOM的更改。 这意味着React 本身会监听document级别的所有事件。 这也意味着从技术上讲， 即使输入特定于React的代码 ，您的所有事件都会经历一个捕获+冒泡循环。 我无法说出这意味着性能明智，因为你“失去”与第一次DOM遍历相关的时间，但另一方面，你将在虚拟DOM中做所有的更改，这比做它们更快在真正的DOM ...

最后， SyntheticEvent确实是一个包装器，旨在减少跨浏览器兼容性问题。 它还引入了池化，通过减少垃圾收集时间使事情变得更快。 此外，由于一个本机事件可以生成多个SyntheticEvent ，因此从技术上讲，它可以让您轻松创建新事件（例如，如果您接收本机touchStart然后连续touchStart本机touchEnd ，则可以发出的syntheticTap事件）。

我在这里写了一篇更详细的帖子。 它远非完美，它们可能有些不精确，但它可能会给你更多关于这个主题的信息。