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

React写法

<button onClick={handleClick}>测试</button>

HTML写法

<button onclick="handleClick()">测试</button>

区别

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