React 组件中怎么做事件代理？它的原理是什么？

在 React 组件中，**事件代理（Event Delegation）**其实是 React 内部实现的一部分，开发者通常无需手动实现事件代理，但理解它的原理和使用方式对于优化性能和掌握底层机制非常重要。

一、React 中事件代理的原理

React 使用的是事件委托（事件代理）机制，其核心原理是：

React 会把所有事件监听器统一绑定到最外层的 DOM 容器（通常是 document 或 root 元素）上，通过事件冒泡捕获所有子组件事件，然后在内部合成事件系统中进行处理。

👇 举个例子

function App() {
  return (
    <div onClick={() => console.log('div clicked')}>
      <button onClick={() => console.log('button clicked')}>Click me</button>
    </div>
  );
}

你看到这里两个事件监听器其实并没有分别绑定在 <div> 和 <button> 上的真实 DOM 上。React 会统一把监听器注册到容器上，比如：

<div id="root">...</div>

然后通过冒泡来判断事件的目标，并在合适的组件上触发回调。

二、React 的事件代理机制优势

• ✅ 性能更好：减少了事件监听器的数量，特别是组件较多时。

• ✅ 统一管理：使用合成事件（SyntheticEvent）系统做跨浏览器兼容处理。

• ✅ 便于事件回收：当组件卸载时不需要显式解绑 DOM 事件，React 自动管理。

三、开发者如何主动实现事件代理

虽然 React 内部已经做了事件代理，但你在某些场景中还是可能手动实现事件代理逻辑，比如动态列表中绑定事件：

function List({ items }) {
  const handleClick = (e) => {
    const { dataset } = e.target;
    if (dataset.type === 'item') {
      console.log('点击了第', dataset.index, '项');
    }
  };

  return (
    <ul onClick={handleClick}>
      {items.map((item, index) => (
        <li key={index} data-type="item" data-index={index}>
          {item}
        </li>
      ))}
    </ul>
  );
}

✅ 好处：

• 减少事件绑定次数（不需要每个 <li> 都绑定 onClick）

• 避免频繁 re-render 时重复注册事件

四、React 中的事件系统（补充理解）

• React 中使用的是 SyntheticEvent（合成事件），是 React 封装的原生事件对象。

• 合成事件提供统一接口，并模拟了原生事件的冒泡和捕获行为。

• 你仍可以通过 event.nativeEvent 获取原生事件对象。

function Example() {
  const handleClick = (e) => {
    console.log('合成事件对象', e);
    console.log('原生事件对象', e.nativeEvent);
  };

  return <button onClick={handleClick}>Click</button>;
}

五、常见注意事项

• React 17+ 开始支持事件自动绑定到事件目标节点上（非 document），但默认仍使用事件委托。

• 某些不冒泡的事件（如 onScroll）在 React 中也能正常使用，因为 React 做了特殊处理。

总结

如你希望我展示React 中事件代理 VS 原生事件委托的性能对比示例，也可以继续扩展！需要吗？