react如何事件代理

React 中的事件代理

React 通过合成事件（SyntheticEvent）实现了事件代理机制。合成事件是对原生 DOM 事件的跨浏览器封装，所有事件都委托到顶层容器（通常是 document 或 root 节点）统一处理，而非直接绑定到具体 DOM 元素。

合成事件的工作原理

1. 事件注册
   React 在组件挂载时，会根据组件内声明的事件（如 onClick、onChange）自动注册对应的事件监听器到顶层容器。

2. 事件触发
   当用户操作触发事件时，浏览器原生事件会冒泡到顶层容器，React 捕获后根据事件目标（event.target）找到对应的组件实例，并触发组件中定义的事件处理函数。

3. 性能优化
   由于事件委托到顶层，React 避免了直接为每个 DOM 元素绑定事件，减少了内存占用。例如，动态列表中的子项无需单独绑定事件。

示例代码

function List() {
  const handleClick = (event) => {
    // 通过 event.target 获取实际触发的元素
    console.log("Clicked item:", event.target.dataset.id);
  };

  return (
    <ul onClick={handleClick}>
      <li data-id="1">Item 1</li>
      <li data-id="2">Item 2</li>
    </ul>
  );
}

与原生事件代理的区别

1. 事件池机制
   React 的合成事件对象会被复用，事件回调执行后，事件属性会被清空。如需异步访问事件属性，需调用 event.persist()。

2. 冒泡与捕获阶段
   React 事件名后缀 Capture 表示捕获阶段（如 onClickCapture），而原生 DOM 通过 addEventListener 的第三个参数控制。

3. 兼容性
   合成事件抹平了浏览器差异（如 event.stopPropagation() 的行为）。

注意事项

• 阻止默认行为
  需显式调用 event.preventDefault()，仅返回 false 不会生效（与原生 DOM 不同）。

• 事件委托层级
  在 React 17 之前，事件委托到 document；React 17+ 改为委托到 ReactDOM.render 的根容器，避免多版本 React 共存时的事件冲突。

• 性能权衡
  对于大量动态元素（如长列表），事件代理能显著减少内存消耗，但需注意事件处理函数的性能优化。