react———react合成事件

React合成事件

一react合成事件

若是DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了不这类DOM事件滥用，同时屏蔽底层不一样浏览器之间的事件系统差别，实现了一个中间层——SyntheticEvent。

1. 当用户在为onClick添加函数时，React并无将Click时间绑定在DOM上面。
2. 而是在document处监听全部支持的事件，当事件发生并冒泡至document处时，React将事件内容封装交给中间层SyntheticEvent（负责全部事件合成）
3. 因此当事件触发的时候，对使用统一的分发函数dispatchEvent将指定函数执行。

二.合成事件和原生事件的执行顺序是什么？能够混用吗？

1.React的全部事件都经过 document进行统一分发。当真实 Dom触发事件后冒泡到 document后才会对 React事件进行处理。

2.因此原生的事件会先执行，而后执行 React合成事件，最后执行真正在 document上挂载的事件

3.React事件和原生事件最好不要混用。原生事件中若是执行了 stopPropagation方法，则会致使其余 React事件失效。由于全部元素的事件将没法冒泡到 document上，致使全部的 React事件都将没法被触发。。

 

 

参考：https://www.jianshu.com/p/8d8f9aa4b033