react如何事件代理
React 中的事件代理
React 通过合成事件（SyntheticEvent）实现了事件代理机制。合成事件是对原生 DOM 事件的跨浏览器封装，所有事件都委托到顶层容器（通常是 document 或 root 节点）统一处理，而非直接绑定到具体 DOM 元素。
合成事件的工作原理
-
事件注册
React 在组件挂载时，会根据组件内声明的事件（如onClick、onChange）自动注册对应的事件监听器到顶层容器。 -
事件触发
当用户操作触发事件时，浏览器原生事件会冒泡到顶层容器，React 捕获后根据事件目标（event.target）找到对应的组件实例，并触发组件中定义的事件处理函数。 -
性能优化
由于事件委托到顶层，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>
);
}与原生事件代理的区别
-
事件池机制
React 的合成事件对象会被复用，事件回调执行后，事件属性会被清空。如需异步访问事件属性，需调用event.persist()。 -
冒泡与捕获阶段
React 事件名后缀Capture表示捕获阶段（如onClickCapture），而原生 DOM 通过addEventListener的第三个参数控制。 -
兼容性
合成事件抹平了浏览器差异（如event.stopPropagation()的行为）。
注意事项
-
阻止默认行为
需显式调用event.preventDefault()，仅返回false不会生效（与原生 DOM 不同）。 -
事件委托层级
在 React 17 之前，事件委托到document；React 17+ 改为委托到ReactDOM.render的根容器，避免多版本 React 共存时的事件冲突。 -
性能权衡
对于大量动态元素（如长列表），事件代理能显著减少内存消耗，但需注意事件处理函数的性能优化。
