React中哪种事件处理方式性能更优：父委托vs子元素逐个绑定

方案1：在父元素上设置单个事件处理器 #

const SomeComponent = () => {
  const [index, setIndex] = useState(0);
  const parentEventHandler = (event: React.MouseEvent) => {
    const divId = parseInt((event.target as HTMLElement).id);
    if (isNaN(divId)) return;
    setIndex(divId);
  };
  return (
    <div onClick={parentEventHandler}>
      <div id={'0'}></div>
      <div id={'1'}></div>
      <div id={'2'}></div>
      <div id={'3'}></div>
    </div>
  );
};

方案2：为每个子元素设置独立事件处理器 #

const SomeComponent = () => {
  const [index, setIndex] = useState(0);
  return (
    <div>
      <div onClick={() => setIndex(0)}></div>
      <div onClick={() => setIndex(1)}></div>
      <div onClick={() => setIndex(2)}></div>
      <div onClick={() => setIndex(3)}></div>
    </div>
  );
};

性能对比结论：方案1的性能更优 #

原因如下：

• 减少事件绑定与内存开销：方案1仅在父元素绑定1个事件处理器，而方案2需要为每个子元素分别创建并绑定独立的箭头函数，每次组件渲染时这些箭头函数都会被重新生成，带来额外的内存占用。如果子元素数量进一步增加（比如成百上千个列表项），这种开销差距会被显著放大。
• 避免不必要的重渲染：若子元素是自定义组件，方案2中每次渲染生成的新箭头函数会被当作新的onClick props传递，导致子元素触发无意义的重渲染。而方案1的事件处理器可通过useCallback包裹保持引用稳定，不会引发这类无效更新。
• 事件委托的效率优势：方案1利用DOM事件冒泡机制，由父元素统一处理子元素的点击事件，底层事件注册层面的开销远低于为每个子元素单独注册事件的方式。

内容的提问来源于stack exchange，提问作者Dima Kambalin