反应中合成事件与原生事件的示例分析

　　介绍

小编给大家分享一下反应中合成事件与原生事件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

1。原生事件

原生事件就是js的原生事件,如通过document.addEventListener来设置的监听事件。

在反应中即使有自己的一套事件机制(见下面合成事件),但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个模态弹窗组件,需要在点击非弹窗区域时关掉弹窗,此时我们只能针对文档进行原生点击事件监听。

由于原生事件需要绑定在真实DOM上,所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作,并且注意要在componentWillUnmount阶段进行解绑操作以避免内存泄漏。

2。合成事件

反应有自己的一套事件机制,它重新封装了绝大部分的原生事件。合成事件采用了事件池,这样做可以大大节省内存,而不会频繁的创建和销毁事件对象。

在反应中,如果需要绑定事件,我们常常在jsx中这么写:

handleClick () { 　　} 　　& lt; div  onClick={this.handleClick.bind()}祝辞 　　反应事件 　　& lt;/div>

大致原理:

反应并不是将点击事件绑在该div的真实DOM上,而是在文档处监听所有支持的事件,当事件发生并冒泡至文档处时,反应将事件内容封装并交由真正的处理函数运行。

以上面的代码为例,整个事件生命周期示意如下:

反应中合成事件与原生事件的示例分析

合成事件的一些特点总结:

<李>

反应上注册的事件最终会绑定在文档这个DOM上,而不是反应组件对应的DOM(减少内存开销就是因为所有的事件都绑定在文档上,其他节点没有绑定事件)

<李>

反应通过队列的形式,从触发的组件向父组件回溯,然后调用他们JSX中定义的回调

<李>

反应通过对象池的形式管理合成事件对象的创建和销毁,减少了垃圾的生成和新对象内存的分配,提高了性能

了解反应合成事件的大概原理后,方便我们解答下面一个问题:

为什么事反应件需要手动绑定这

合成事件触发之后会冒泡一路到文档的节点,然后开始分发文档节点收集到的事件,这个时候的反应从事件触发的组件实例开始,遍历虚拟DOM树,从树上取下我们绑定的事件,收集起来,然后执行。举个例子:

class  Test  extends  React.Component  { 　　,,fatherHandler =,, function 父亲(),{,/*…*/} 　　,,childHander =, function 孩子(),{/*…*/} 　　 　　,才能呈现(){ 　　,,,,return  ( 　　,,,,,,& lt; div  onClick={this.fatherHandler}比; 　　,,,,,,,,& lt; span  onClick={this.childHander}比; 　　,,,,,,,,& lt;/span> 　　,,,,,,& lt;/div> 　　,,,,); 　　,,} 　　 　　}

当事件触发以后反应会把上面的事件处理函数放到一个数组里是这样的

(父亲,孩子)

最后,反应只要遍历执行这个数组,就能执行所有需要执行的事件处理函数。这里反应对函数进行了临时保存,这个时候执行的话,这自然就丢失了。

如果反应保存顺便保存一下实例,还是可以做的到,不需要你绑定的,但是这样对于反应来说代价太大了。

3。原生与合成事件触发顺序

,, componentDidMount (), { 　　,,,this.parent.addEventListener(& # 39;点击# 39;,,(e),=祝辞,{ 　　,,,,,console.log (& # 39; dom 父母# 39;); 　　,,,}) 　　,,,this.child.addEventListener(& # 39;点击# 39;,,(e),=祝辞,{ 　　,,,,,console.log (& # 39; dom 孩子# 39;); 　　,,,}) 　　,,,document.addEventListener(& # 39;点击# 39;,,(e),=祝辞,{ 　　,,,,,console.log(& # 39;文档# 39;); 　　,,,}) 　　,,} 　　 　　childClick 才能=,(e),=祝辞,{ 　　,,,console.log (& # 39; react 孩子# 39;); 　　,,} 　　 　　parentClick 才能=,(e),=祝辞,{ 　　,,,console.log (& # 39; react 父母# 39;); 　　,,} 　　 　　渲染才能(),{ 　　,,,return  ( 　　,,,,,& lt; div  onClick={this.parentClick}, ref={ref =祝辞,this.parent =,裁判}祝辞 　　,,,,,,,& lt; div  onClick={this.childClick}, ref={ref =祝辞,this.child =,裁判}祝辞 　　,,,,,,,,,测试 　　,,,,,,,& lt;/div> 　　,,,,,& lt;/div>) 　　以前,,}

反应中合成事件与原生事件的示例分析