javascript - 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

Answer 2

在 React 中，通常推荐直接将事件处理器绑定到具体的元素上，而不是使用事件委托。以下是几个原因：

1. 可预测性：当你在组件的 JSX 中直接绑定事件处理器时，你可以清楚地知道哪个组件有哪个事件处理器。这种方式使得代码更易于理解和维护。
2. 避免全局状态：使用事件委托可能会导致全局状态的问题，因为事件委托通常需要在父元素上设置事件监听器，这可能会使得父元素的状态与子元素的状态耦合在一起。
3. 性能：虽然事件委托在某些情况下可以提高性能（例如，当有很多子元素需要监听同一个事件时），但在大多数情况下，直接绑定事件处理器的性能更好，因为每次渲染时都会创建新的回调函数。
4. 更好的 TypeScript 支持：如果你使用 TypeScript，直接绑定事件处理器可以更好地利用类型系统，因为你可以在组件中明确地指定事件的类型。

在你的例子中，如果你使用事件委托，你需要检查 e.target.nodeName 是否为 "UL"，这可能会使得代码变得更复杂和难以理解。而且，如果 ul 元素被其他元素包裹（例如，<div> 元素），那么事件委托可能无法正常工作。因此，直接将事件处理器绑定到 li 元素上通常是更好的选择。