React原生事件才是亲儿子，合成事件哭晕在厕所

原生事件：绑定在真实的DOM上，一般在componentDidMount阶段进行绑定，在componentWillUnmount阶段进行解绑，以免内存泄漏。

const closeDom = this.closeAlert;
closeDom.addEventListener('click', this.closeMarker, false);

合成事件：React将事件绑在虚拟DOM上（合成的只配在虚拟dom上，难受），在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。

<div onClick={this.onClick}>Demo</div>

事件执行的优先级：原生事件>合成事件（亲儿子的基本优待政策），原因是合成事件是在事件的冒泡阶段执行，此时原生事件已经执行，而合成事件需要冒泡到document处才能执行。

componentDidMount() {
this.demoDiv.addEventListener('click', this.onDOMClick, false)
    }

onDOMClick = (evt) => {
console.log('dom event')
    }

onClick= (evt) => {
console.log('react event')
    }

render() {
    return (
        <div ref={(self) => this.demoDiv= self} onClick={this.onClick}>Demo</div>
    )
}

//输出结果为：dom event react event

同一dom节点，如果原生事件使用evt.stopPropagation()阻止冒泡，由于无法冒泡到document，合成事件将失效。（你看看，这还是人吗，亲儿子阻止冒泡，搞得合成事件直接完蛋）
父子节点之间，原生事件和合成事件混用的情况下，两个节点的原生事件都会优先执行。（基本权利，同上，心累）

componentDidMount() {
this.parentDom.addEventListener('click', this.onParentDOMClick, false)
this.childDom.addEventListener('click', this.onChildDOMClick, false)
    }

onParentDOMClick = (evt) => {
console.log('parent dom event')
    }

onChildDOMClick = (evt) => {
console.log('child dom event')
    }

onParentClick = (evt) => {
console.log('parent react event')
    }

onChildClick = (evt) => {
console.log('child react event')
    }

render() {
return (
<div ref={(self)=>this.parentDom= self} onClick={this.onParentClick}>
<div ref={(self)=>this.childDom= self} className="child" onClick={this.onChildClick}>
                    Demo
</div>
</div>
        )
    }
    
//输出结果为：child dom event parent dom event child react eventparent react event

总结：合成事件的监听器是由React统一注册在document上面的，仅有冒泡阶段，所以原生事件的响应总是早于合成事件。同一Dom树节点，阻止原生事件冒泡后，会阻止合成事件的监听器执行。所以，在开发中，应正确使用或尽量避免混用事件。（有亲的就不要后的，亲儿子没办法的话，小心被阻止冒泡半路截胡）
以上内容参考了沈老师的知识点总结，如果有涉及侵权的话，请联系我删除。

React原生事件才是亲儿子，合成事件哭晕在厕所

推荐阅读更多精彩内容