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

作者站长头像
站长
· 阅读数 9

如题，已知目前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有没有必要？

回复
1个回答
avatar
test
2024-07-01

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

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

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容