react中绑定事件为啥不绑定在ul上使用事件代理而直接绑定在li上？

Question

react中绑定事件为啥不绑定在ul上使用事件代理而直接绑定在li上？

// 普通写法
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>
  );
};

// 事件委托写法
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>
  );
};

Answer 1

因为react合成事件已经用事件代理给你实现了

https://zh-hans.legacy.reactjs.org/docs/events.html

可以参考看看 https://segmentfault.com/a/1190000038251163