React解密：React事件绑定原理是什么？

React的事件绑定，是通过在react元素上添加事件属性，且事件属性名必须采用驼峰命名的方式，如onClick等。

import React from 'react'

const Test = () => {
    const handleClick = () => {
        console.log('点击我')
    }
    return (
        <div onClick={this.handleClick.bind(this)}>点我</div>
    )
}

export default Test

那么写<div onClick={this.handleClick.bind(this)}>点我</div>这样的一个原理是什么呢？

其实react并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。

另外冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）.因此我们如果不想要是事件冒泡的话调用event.stopProppagation()方法是无效的。而应该调用event.preventDefault().

就这样。。。