react-合成事件

179 阅读1分钟
<div onClick={dosomething}>点击事件</div>

上面的onClick就是 react的合成事件(SyntheticEvent)名,不是原生的浏览器事件名(原生的是全小写onclick)。

合成事件对象的实例,它符合W3C标准,且与原生的浏览器事件拥有同样的接口,支持冒泡机制,所有的事件都自动绑定在最外层上元素。

在React底层,主要对合成事件做了两件事:

  1. 事件委派:React会把所有的事件绑定到结构的最外层,使用统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。
  2. 自动绑定:React组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件

实现合成事件的好处在于:

  1. 抹平了浏览器之间的兼容问题,另外这是一个跨浏览器原生事件包装器,赋予了跨浏览器开发的能力;
  2. 内部维护了事件池,来统一管理事件对象