React写法
<button onClick={handleClick}>测试</button>
HTML写法
<button onclick="handleClick()">测试</button>
区别
| React | HTML原生 | |
|---|---|---|
| 事件绑定方式 | 小驼峰命名法，事件处理函数通过 JSX 语法直接绑定 | 全小写形式定义 |
| 事件处理函数 | 函数引用 | 内联的字符串表达式 |
| 事件对象 | 基于 Event 重写的 SyntheticEvent 对象 | 原生的 Event 对象 |
| 默认行为 | 通过 event.preventDefault() 来阻止事件的默认行为，不需要 return false | 可以是 event.preventDefault()，但在早期的浏览器中，也可以是return false |
React事件机制
React 的事件机制基于合成事件SyntheticEvent，它是React在浏览器原生DOM事件的基础上进行了封装和优化的，并提供了更好的跨浏览器兼容性和性能。
SyntheticEvent
SyntheticEvent模仿了浏览器的原生DOM事件，并提供了一个跨浏览器一致的 API。
React 会将事件处理函数注册到根元素上（通常是 document 或 root），而不是每个具体的 DOM 节点上。通过事件委托，React 可以减少事件处理函数的注册数量。可以更轻松地管理事件生命周期，并在必要时进行批量处理。
React 使用事件池复用合成事件对象，减少内存的分配并提高性能。当一个事件被触发时，React 会从事件池中取出一个合成事件对象，并将该事件对象的属性设置为当前事件的相关属性。当事件处理函数执行完毕后，React 会将这个合成事件对象重置，并将它放回事件池中，供下次事件触发时再利用。
合成事件对象与原生事件对象拥有相同的属性和方法，如 preventDefault()、stopPropagation()、target、currentTarget 等。
React 会合并事件处理函数中的 setState 调用，并在事件处理函数执行完毕后批量更新组件状态。这种机制可以有效减少重渲染的次数，从而提高性能。
总结
React 的事件机制通过合成事件和事件委托提供了一种高效、跨浏览器兼容的事件处理方式。它通过统一的 API 封装了原生DOM事件，简化了事件处理的复杂性，并且通过事件池和批量更新机制优化了性能。在实际开发中，理解和正确运用 React 的事件机制，可以帮助开发者编写出更高效、可维护的代码。