反应：为每个孩子添加一个事件侦听器并将一个引用传递给父母的事件处理程序 - 效率低吗？ 事件冒泡可能吗？

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 将在幕后使用事件委托。