本文主要是介绍react虚拟事件（合成事件）与dom原生事件的混用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
react合成事件
如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。
原理
React中，如果需要绑定事件，我们常常在jsx中这么写：
<div onClick={this.onClick}>react事件
</div>原理大致如下：
React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。
以上面的代码为例，整个事件生命周期示意如下：
其中，由于event对象是复用的，事件处理函数执行完后，属性会被清空，所以event的属性无法被异步访问，详情请查阅event-pooling。
事件响应顺序
由于原生事件需要绑定在真实DOM上，所以一般是在componentDidMount阶段/ref的函数执行阶段进行绑定操作，在componentWillUnmount阶段进行解绑操作以避免内存泄漏。
示例如下：
class Demo extends React.PureComponent {componentDidMount() {const $this = ReactDOM.findDOMNode(this)$this.addEventListener('click', this.onDOMClick, false)}onDOMClick = evt => {// ...}render() {return (<div>Demo</div>)}
}
1.首先DOM事件监听器被执行，然后事件继续冒泡至document，合成事件监听器再被执行。
其实是因为，合成事件的代理并不是在document上同时注册捕获/冒泡阶段的事件监听器的，事实上只有冒泡阶段的事件监听器，每一次DOM事件的触发，React会在event._dispatchListeners上注入所有需要执行的函数，然后依次循环执行（如上文React源码）
作者：Nekron
链接：https://juejin.im/post/59db6e7af265da431f4a02ef
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者：Nekron
链接：https://juejin.im/post/59db6e7af265da431f4a02ef
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者：Nekron
链接：https://juejin.im/post/59db6e7af265da431f4a02ef
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
这篇关于react虚拟事件（合成事件）与dom原生事件的混用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
