react事件委托该如何实现呢？

最新推荐文章于 2025-05-17 15:12:44 发布

原创

最新推荐文章于 2025-05-17 15:12:44 发布 · 2.9k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了React中的事件委托技术，通过将事件监听器绑定在父元素而非每个子元素，从而减少内存消耗和提高性能。文章详细阐述了事件委托的好处，包括动态绑定事件和减少内存开销，并通过对比普通写法与事件委托方式，展示了如何在实际代码中应用这一优化策略。

1. 什么是事件委托？

事件委托也称之为事件代理（Event Delegation），是JavaScript中常用绑定事件的常用技巧。
顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

假设有这么一个场景，有一个列表是根据数组动态渲染的，而渲染出来的每条数据都需要同样的点击事件及回调。

想象一下，如果给每个列表项都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；

假设遍历3、5次，分别对标签绑定事件，可能体现不出来。那要是遍历上几十遍、上百遍，那么差距就会愈加明显了

所以这种时候，最好的做法就是将事件委托到其父元素身上。

再如上描述，每个标签都绑定事件，当标签删除再渲染的时候，事件也会先卸载再重新绑定，此时就很麻烦，且重复操作。

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的

const Sidebar = (props) => {
   
   
  function clickCallback(e) {
   
   
    let type = e.target.getAttribute("data-type");