javascript - 理解 React 的综合事件系统

Question

我这几天一直在想这个问题。

根据文档，React 有 synthetic event system ，它是一个浏览器本地事件的跨浏览器包装器。通过文档，我的理解是否正确，即自定义(合成)事件系统与效率无关，而是跨浏览器兼容性。

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

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

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

Answer 1

好吧，你可能已经自己想好了所有的事情，但是当我问自己同样的问题时，我想我会把它留在这里以防其他人不仅对使用 React 感到好奇而且还了解它是如何工作的。

所以，我不完全确定你的问题(尤其是“将事件附加到元素”部分)但是:

• React 就是关于虚拟 DOM 的。顾名思义，它因此构建在“真实”环境(即 DOM)之上。因此，一切都发生在该抽象层，包括事件处理。
• 事件出现在它们的“自然”环境中，因此 DOM 或 native (取决于您使用的 react 的风格)

因此，您首先需要将事件带到虚拟 DOM，在那里计算您的更改并将它们分派(dispatch)到虚拟 DOM 中的组件表示，然后将相关更改带回以适本地反射(reflect)在 DOM 中。

通过顶级委派有效地完成对虚拟 DOM 的更改。这意味着 React 自身 会在 document 级别监听所有事件。这也意味着从技术上讲，您的所有事件都经过一个捕获 + 冒泡循环甚至在进入特定于 React 的代码之前。我无法说出这意味着性能方面的意义，因为您确实“失去”了与第一次 DOM 遍历相关的时间，但另一方面，您将在虚拟 DOM 中进行所有更改，这比进行更改要快在真实的 DOM 中...

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

我已经写了一篇有更多细节的帖子 here .它远非完美，它们可能有些不精确，但它或许可以为您提供有关该主题的更多信息。