React事件机制与通常事件的混用

react的事件机制

react事件的核心内容就是事件委派，指全部的组件全部内部事件都绑定到结构的最外层，一般是document。在这个最外层上维持一个映射来保存全部组件内部的事件监听和处理函数。当事件发生的时候，先是被事件监听器捕捉，而后找到真正的事件处理函数。这么作主要的好处有 1.全部的事件都是挂载在一个元素上，能够极大的省去事件挂载的资源，就好比一个list有多个li，每一个都须要挂载事件，这样挂载只须要挂一个事件，而若是对每个li进行挂载，那么挂载的事件个数就会疯狂增长，是对内存的一种损耗 2.卸载事件的时候简洁而便利，回收机制只须要处理一个总的挂载资源就能够

具体阶段主要分为两个阶段1.事件注册2.事件触发 1.首先将事件注册在最外层 2.将事件的内容进行存储 2.经过dispatchEvent来进行事件派发 源码可见这篇文章 www.jianshu.com/p/c01756e52…

写法上借鉴的是Dom0的写法

<button onclick="hancleClick()"></button>
复制代码

react中使用通常事件

可是咱们在react开发过程当中每每不能只用react事件体系，一般须要用到原生体系来解决一些问题，而用原生体系若是遗漏了一些细节的话，很容易致使一些问题。

由于react的事件体系没法很好的在组件内部绑定全局事件，因此全局事件用到原生绑定的几率是最高的，好比须要在window上绑定size事件，须要在document上绑定事件，除了这个以外一些好比点击除了某区域外的内容都会执行的事件也很适合用全局来进行绑定。

可是若是在使用原生事件的时候没有去把每个事件进行回收的话，会形成内存溢出，由于react的router切换组件的时候会进行组件的卸载，而后再次进入的时候挂载，因此事件会屡次进行绑定，针对一个线上的服务，内存溢出是一个很危险的点。

上面讲了react事件和通常事件混用内存溢出的问题，接下来说第二个问题 你们能够想象这样一种场景，app上点击一块内容须要展现二维码，而后点击非二维码区域进行关闭。 这个按照咱们正常的事件逻辑，处理方式有两种

1. 在全局绑定点击事件，而后触发事件的时候判断class名称来判断是否触发逻辑
2. 在全局绑定事件，在触发事件的时候经过阻止事件冒泡来进行处理 通常二者用的人都有，可是阻止冒泡在理解以后处理起来比较简单

//核心代码
componentDidMount(){
    document.body.addEventListener('click',e=>{
        this.setState({
            qrActive:true
        })
    })
}

handleClickQr(e){
    e.stopPropagation();
}

复制代码

然而你们回去试一下，能够发现，具体的结果呈现和你想象中的并不一致，你点击二维码区域也会把二维码隐藏起来，这是为何呢？冒泡机制没有成功被打断？

其实并非，若是你还记得刚刚说的react事件机制就能知道，react的事件就是统一挂载在顶级dom上的，因此react的事件机制根本没有经历你想象中的从顶级元素到二维码的捕获，目标，冒泡阶段，因此阻止事件冒泡并不能阻止body绑定的click事件的执行，若是你想要进行上述的逻辑判断，仍是要使用第一种处理方式.

可是原生组件的阻止冒泡行为却能够阻止react事件合成机制.