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进行绑定。

标签：原生,面试题,合成,react,阻止,事件,event,冒泡
来源： https://www.cnblogs.com/forseize/p/16611582.html