理解React的综合事件系统

Question

现在已经有几天了。

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

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

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

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

Answer 1

好吧，你可能已经自己想出了所有的东西，但是当我问自己同样的问题时，我想我还是留在这里以防其他人对使用感到好奇反应但也了解如何运作。

所以，我对你的问题并不完全确定（尤其是＆＃34;将事件追加到元素＆＃34;部分）但是：

• React就是虚拟DOM。顾名思义，因此它构建在之上＆＃34; real＆＃34;作为DOM的环境。因此，一切都发生在抽象层中，包括事件处理。
• 事件出现在＆＃34; natural＆＃34;环境，所以DOM或本机（取决于您使用的反应的风味）

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

通过顶级授权有效地完成对虚拟DOM的更改。这意味着React 本身会监听document级别的所有事件。这也意味着从技术上讲，所有事件都会经过一次捕获+冒泡循环，甚至在输入特定于React的代码之前。我无法说明这意味着什么表现明智，因为你做了＃34;失去＆＃34;与第一次DOM遍历相关联的时间，但另一方面，您将在虚拟DOM中进行所有更改，这比在真实DOM中执行更快...

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

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