微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

react面试题

react事件机制
在得到dom树之后,react会处理属性上是否有事件,react不会把事件绑定到真正的节点上,而是把所有的事件绑定在document(最外层节点)上,部分事件除外,如audio、video的onplay、onpause事件,这些事件是用原生标签进行代理,但仍由dispatchEvent进行绑定,并且将得到的事件类型和回调函数存储在映射表中,但对于同一事件类型,不管注册几次,最终只会保留一个有效实例。在事件触发中,开始dom流,捕获阶段,目标阶段,冒泡阶段,冒泡到document时,执行统一的dispatchEvent函数,根据原生对象获得事件触发的组件,根据事件类型生成相应的合成事件,并且封装原生事件和冒泡机制,获取所有父组件,根据映射表得到相应的事件回调,批量处理合成事件的回调。
对于原生事件,事件被触发就会创建一个事件对象,对于合成事件,有一个专门的事件池来管理事件的创建和销毁。当需要使用事件时,就会从事件池中复用对象,当事件结束时,就会销毁事件上的属性,以便下次再复用。这样的话可以减少内存的消耗,提高性能(这个事件池就是比如单击事件SyntheticMouseEvent、焦点事件SyntheticFocusEvent的集合)。
映射表结构
{
click: { key1: fn1, key2: fn2 },
change: { key1: fn1, key2: fn2 }
}
对于同一个事件类型,不管注册几次,最终只会保留一个有效实例(document.addEventListener('click', dispatchEvent))。
阻止原生事件冒泡合成事件不能执行,阻止合成事件冒泡不影响原生事件。
原生事件先执行,合成事件后执行。子原生事件先执行,父原生事件先执行,子合成事件后执行,父合成事件后执行
阻止冒泡的方法只能通过event.preventDefault()来阻止,不能用event.stopPropagation()和event.cancelBubble = false和return false(return false在js中只能阻止认行为,只有在jquery才能阻止认行为和事件冒泡)。
合成事件与原生事件的区别:
1.封装事件,抹平不同浏览器的差异。
2.写法不同,合成事件是用驼峰式写法,原生事件是用全部小写。
3.事件处理的语法不同,合成事件是用函数的形式,原生事件是用字符串的形式。
4.阻止冒泡的方法不同,合成事件是用event.preventDefault()来阻止,原生事件是用event.stopPropagation()和event.cancelBubble = false和return false来阻止。
无法在异步中访问参数e,因为参数e也是合成事件封装的,不是原生事件的参数e。
不是所有的原生事件都有合成事件,比如audio、video的onplay、onpause,这些事件是用原生标签进行代理,但仍由dispatchEvent进行绑定。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐