深入剖析 React 合成事件：透过 onClick 看本质

以下是对React中onClick事件及其合成事件机制的深度解析，结合6年前端开发经验，从现象到本质进行系统性阐述：

---

一、表面现象：onClick的直观使用

function Button() {const handleClick = (e) => {console.log("事件类型：", e.type); // 输出：clickconsole.log("目标元素：", e.target); // 触发事件的DOM元素};return <button onClick={handleClick}>点击我</button>;
}

表象特征：

• 语法类似DOM事件但使用驼峰命名
• 接收的是合成事件对象（SyntheticEvent）
• 无需手动addEventListener

---

二、本质探析：合成事件（SyntheticEvent）的核心设计

1. 设计动因

• 浏览器兼容性：统一不同浏览器事件接口差异（如IE的window.event）
• 性能优化