【React】React事件和HTML事件的区别

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 的事件机制，可以帮助开发者编写出更高效、可维护的代码。