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

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

一、React 中事件代理的原理

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

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

👇 举个例子

javascript 复制代码

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

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

bash 复制代码

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

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

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

✅ 性能更好：减少了事件监听器的数量，特别是组件较多时。
✅ 统一管理：使用合成事件（SyntheticEvent）系统做跨浏览器兼容处理。
✅ 便于事件回收：当组件卸载时不需要显式解绑 DOM 事件，React 自动管理。

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

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

javascript 复制代码

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 获取原生事件对象。

javascript 复制代码

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 事件代理	自动将事件统一注册在根容器上，通过事件冒泡触发
优势	性能高、统一管理、自动解绑
是否需要手动写	通常不需要，但某些情况（如大量元素）可手动用事件委托
合成事件	`SyntheticEvent` 是 React 封装的跨浏览器事件系统