反應：為每個孩子添加一個事件偵聽器並將一個引用傳遞給父母的事件處理程序 - 效率低嗎？ 事件冒泡可能嗎？

Question

我是 React 新手，正在考慮將它應用到我的項目中，以獲得更容易執行的結構和更容易的 DOM 渲染，但我遇到了事件委托的問題。

在普通的 JS 中，如果你有一個包含不定數量的子元素的容器元素（例如<button> s），你只需在父元素上放置一個事件監聽器並讓事件冒泡。 我無法找到使用 react 元素執行此操作的示例，並且不確定處理該系統事件的唯一方法是否是將事件偵聽器委派給所有子級，我不喜歡這樣的聲音。

你可以在 React 中進行事件冒泡（並訪問 React 元素目標）嗎？

會不會是這樣的情況，當 react 編譯時它編譯成 JS，它以“普通”方式使用事件偵聽器和事件冒泡？

Answer 1

React 默認使用事件委托。 當您將onClick放在 React 組件上時，它不會在該組件的頂級 DOM 元素上設置處理程序； 在根組件或document上使用一個。 我可以在文檔中找到提到的唯一地方是在這里，當談到將事件分派到您的組件以進行測試時，它說：

...請注意，您需要在創建 [用於測試] 的每個事件中傳遞{ bubbles: true }以使其到達 React 偵聽器，因為 React 會自動將事件委托給文檔。

在對此問題的評論中也提到了這一點：

React 不會將您的單擊事件處理程序附加到節點。 它使用事件委托並在文檔級別進行偵聽。

所以 go 提前做你正在編寫的代碼看起來正確的事情。 React 將在幕后使用事件委托。