理解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事件）。

我在這里寫了一篇更詳細的帖子。 它遠非完美，它們可能有些不精確，但它可能會給你更多關於這個主題的信息。