react怎么实现事件代理
事件代理的概念
事件代理（Event Delegation）是一种利用事件冒泡机制，将子元素的事件委托给父元素处理的技术。在React中，可以通过在父元素上绑定事件监听器，结合event.target判断触发事件的子元素，从而减少事件监听器的数量，提升性能。
实现步骤
绑定事件到父元素
在父元素上添加事件监听器，例如onClick。子元素触发事件后，事件会冒泡到父元素被捕获。
function ParentComponent() {
const handleClick = (event) => {
if (event.target.matches('.child-button')) {
console.log('子元素按钮被点击', event.target.textContent);
}
};
return (
<div onClick={handleClick}>
<button className="child-button">按钮1</button>
<button className="child-button">按钮2</button>
</div>
);
}通过event.target识别子元素
使用event.target获取实际触发事件的DOM元素，通过类名、标签名或自定义属性（如data-*）进行条件判断。
const handleClick = (event) => {
if (event.target.dataset.action === 'delete') {
// 处理删除逻辑
}
};动态生成子元素的场景
对于动态列表，事件代理可以避免为每个子元素单独绑定事件，尤其适合性能优化。
function ListComponent() {
const items = ['A', 'B', 'C'];
const handleClick = (event) => {
const index = event.target.dataset.index;
if (index !== undefined) {
console.log('点击项:', items[index]);
}
};
return (
<ul onClick={handleClick}>
{items.map((item, index) => (
<li key={index} data-index={index}>{item}</li>
))}
</ul>
);
}注意事项
- 阻止冒泡：如果子元素需要阻止事件冒泡到父元素，需调用
event.stopPropagation()。 - 性能优势：减少内存占用，尤其适合大量动态元素。
- 兼容性：React合成事件系统已封装原生事件，无需担心跨浏览器差异。
通过事件代理，可以简化代码结构并提升性能，尤其在列表或动态内容中效果显著。
