react相关内容梳理

112 阅读2分钟

1、react 事件机制

<div onClick={this.handleClick.bind(this)}>点击</div>

react 并不是将事件绑定到div的真实dom上,而是在document处监听了所有的事件,当事件发生并冒泡到document的时候,react将事件内容封装并交由真正的处理函数运行,这样的方式不仅能够减少内存的消耗,而且能在组建销毁的时候统一订阅和移除事件。

除此之外,冒泡到document的事件也不是原生的浏览器事件,而是由react自己实现的合成事件。

因此,如果想要阻止事件冒泡的话,应该调用event.preventDefault(),而不是event.stopPropagation()

2、react 的事件和普通事件的区别

区别:

  1. 事件名称命名,原生是全小写,react是小驼峰
  2. 对于原生事件是字符串,react事件为函数;
  3. react 事件不能通过return false 的方式来阻止默认事件,必须要调用event.preventPagation()

合成事件是react模拟原生DOM事件所有能力的一个事件对象,其优点如下:

  1. 兼容所有浏览器,更好的跨平台
  2. 将事件统一放在一个数组中,避免频繁的新增与删除
  3. 方便react 统一管理和事物机制

事件执行的顺序是原生先执行,合成事件后执行,合成事件是绑定在document上,所以尽量避免原生事件和合成事件混合使用,因为一旦原生事件阻止冒泡,那可能会导致合成事件不执行。

3、React事件怎么做事件代理?它的原理是什么? react是基于虚拟DOM实现的一个SyntheticEvent层,定义的事件处理器会接收到一个合成事件对象的实例,它符合W3C标准,且与原生的浏览器事件拥有同样的接口,支持冒泡,所有的事件都会主动绑定到最外层上。 在react底层,主要对合成事件做了两件事:

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