react事件委托该实现呢

1. 什么是事件委托？

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

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

2. 事件委托有什么好处？

2.1 减少内存消耗

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

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

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

2.2 动态绑定事件

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

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

3. 普通写法与事件委托写法对比

3.1 普通写法

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

  return (
    <ul className={styles.sidebar} id="ul">
      {typeMap.map((item) => (
        <li
          data-type={item.id}
          key={item.id}
          onClick={(e) => clickCallback(e)}
        >
          {item.desc}
        </li>
      ))}
    </ul>
  );
};

3.2 事件委托方式

const Sidebar = (props) => {
  useEffect(() => {
    document.getElementById("ul").addEventListener("click", (e) => {
      if (e.target.nodeName == "UL") return;
      let type = e.target.getAttribute("data-type");
      props.pushTags(type);
    });
  }, []);

  return (
    <ul className={styles.sidebar} id="ul">
      {typeMap.map((item) => (
        <li data-type={item.type} key={item.id}>
          {item.desc}
        </li>
      ))}
    </ul>
  );
};

that’s all~

这篇好文章是转载于：学新通技术网