react.js - React有了事件代理我们需不需要自己再写事件代理?

Question

如题，已知目前React是采用合成事件去完成“代理”我们的所有事件，那么既然React已经将所有的事件“挂”在了根节点容器上，我们还有没有必要循环列表的逻辑中写事件代理？例如如下伪代码：

// planA
<div>
[很长的列表].map(item => {
    return <li key={item.id} onClick={() => {
        // 点击事件的业务逻辑
    }}>{item.name}</li>
})
</div>

// planB
<div onClick={(e) => {
    // 代理列表的点击事件
}}>
[很长的列表].map(item => {
    return <li key={item.id}>{item.name}</li>
})
</div>

以上planB有没有必要？

Answer 1

React 中，合成事件是通过事件冒泡机制来实现事件代理的。在默认情况下，React 将所有的事件都绑定在根节点容器上，然后通过事件冒泡来触发对应的回调函数。因此，如果你使用的是类似 planA 的代码，那么不需要显式地对列表中的每个元素进行事件代理，React 已经自动帮你完成了事件代理的工作。

而对于类似 planB 的代码，虽然也可以完成事件代理的工作，但是并不推荐这样做。因为这种做法会将所有的事件绑定在根节点容器上，这可能会影响性能。而且，如果你在根节点容器上绑定了多个事件处理函数，那么这些处理函数的执行顺序可能是不确定的，这可能会导致一些意想不到的问题。

如果你使用 React，推荐使用类似 planA 的代码，直接在列表元素上绑定事件处理函数即可。React 会自动完成事件代理的工作，你不需要显式地进行事件代理。如果你需要对列表元素进行事件代理，也可以使用列表元素的父元素来进行事件代理，这样会更加高效和可靠