了解React的综合事件系统 [英] Understanding React's Synthetic Event System

问题描述

这已经让我想到了几天。

This has been on my mind for a few days now.

根据文档，React已经综合事件系统，它是围绕浏览器本机事件的跨浏览器包装 。通过文档，我的理解是正确的，即定制（合成）事件系统与效率无关，而是与跨浏览器的兼容性有关。

As per the docs, React has synthetic event system, which is a a cross-browser wrapper around the browser's native event. Going through the docs, is my understanding correct that the custom (synthetic) event system, isn't about efficiency but rather cross-browser compatibility.

换句话说，React还是将事件附加到元素上，而不是在父元素上使用更有效的事件委托方法？

In other words, React still appends the event to the element rather than the more efficient approach of event-delegation on the parent element?

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

I also noticed this in Firefox Inspector which raised the initial curiosity.

问这个问题的原因是我正在开发一个应用程序，用户可以选择上千个元素

The reason for asking the question is that I am working on an app where a user maybe able to select a thousand elements & drag them around the screen, so eventually event delegation is going to come up.

推荐答案

好的，您可能已经了解了所有内容自己的，但是当我问自己同样的问题时，我想我会把这个留在这里，以防其他人不仅对使用 React感到好奇，而且对它的工作原理有一个了解。

Alright, you perhaps already figured everything on your own, but as I asked myself the same questions, I figured I'd leave this here in case someone else is curious about not only using React but also getting an idea about how it works.

因此，我不确定您的问题（尤其是将事件附加到元素部分），但是：

So, I'm not entirely sure about your question (especially the "append the event to element" part) but:

• 反应只与虚拟DOM有关。顾名思义，因此，它是在作为DOM的真实环境之上构建的。因此，一切都发生在该抽象层中，包括事件处理。


• 事件出现在其自然环境中，因此DOM或本机（取决于

• React is all about the virtual DOM. As the name implies, it is therefore built on top of the "real" environment that is the DOM. Consequently, everything takes place in that abstracted layer, including event handling.
• Events appear in their "natural" environment, so the DOM or native (depending on the flavor of react you are using)

因此，您首先需要将事件带入虚拟DOM，在此处计算更改并将它们分配给虚拟DOM中的组件表示形式，然后将相关更改放回适当的位置，以反映在DOM中。

Consequently, you first need to bring the events up to the virtual DOM, compute your changes there and dispatch them to the representation of components in the virtual DOM, then bring the relevant changes back down to be reflected in the DOM appropriately.

将更改提交到虚拟DOM是顶级代表团有效地完成了。这意味着React 本身会监听文档级别的所有事件。从技术上讲，这也意味着您的所有事件在进入甚至还没有输入React特定代码之前都会经历一个捕获+冒泡循环。我无法说出这意味着性能明智，因为您浪费了与第一次DOM遍历相关的时间，但另一方面，您将在虚拟DOM中进行所有更改，这比这样做快得多在真正的DOM中...

Carrying changes up to the virtual DOM is effectively done by top-level delegation. This means that React itself listens to all events at a document level. This also means that technically, all your events go through one capture + bubbling loop before even entering the React-specific code. I would not be able to say what that implies performance wise, because you do "lose" the time associated to that first DOM traversal, but on the other hand you will do all your changes in the virtual DOM, which is faster than doing them in the real DOM...

最后， SyntheticEvent 确实是一个包装器，旨在减少跨浏览器兼容性问题。它还引入了池化，通过减少垃圾收集时间来加快处理速度。此外，由于一个本地事件可以生成多个 SyntheticEvent ，因此从技术上讲，它可以让您轻松地创建新事件（例如 syntheticTap 事件如果您先后接收到本机 touchStart 然后又接续了本机 touchEnd ，则可能会发出该消息。）

Finally, SyntheticEvent is indeed a wrapper, which aims at reducing cross-browser compatibility issues. It also introduces pooling, which makes the thing faster by reducing garbage collection time. Besides, as one native event can generate several SyntheticEvent, it technically lets you create new ones easily (like a syntheticTap event that could be emitted if you receive a native touchStart then a native touchEnd in succession).

我写了一篇更详细的文章此处。它远非完美，它们可能有些不精确，但也许可以为您提供有关该主题的更多信息。

I have written a post with more details here. It is far from perfect and their might be some imprecision, but it can perhaps give you some more info on the topic.

这篇关于了解React的综合事件系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！