React事件绑定与解绑

React中事件分类

React中事件绑定分为两种：

1.直接添加在React元素上的事件，这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEvent)，这种情况下React内部会在组件销毁前自行对事件进行解绑；

2.JS原生事件事件（利用ref获取原生元素），这种情况下需要我们手动对事件进行解绑。

本文主要对第二种情况进行介绍。

React中何时进行事件绑定与解绑

事件绑定在React的componentDidMount生命周期函数中进行，解绑在componentWillUnmount生命周期函数中进行。

为什么要解除绑定的事件

一般来说事件解绑为了节约内存或者防止内存泄漏，或者业务逻辑的需要。

React中事件处理需要注意的事项

1.不要把原生事件和React的合成事件混淆在一起使用，详情看这篇文章 https://segmentfault.com/a/1190000008782645 （这篇文章有个错误点要注意，removeEventListener的第二个参数是必须的，不能不传，这跟jQuery的事件解绑是不同的！！！）。

2.使用addEventListener进行事件绑定的时候不要传入匿名函数作为回调，因为你绑定和解绑的时候看起来一样的匿名函数其实不是一个，它们的地址是不同的，这是一个很容易踩的坑。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            visible : true
        }
        this.handleClick = this.handleClick.bind(this); //绑定和解绑的回调函数是实例的同一个方法
    }
    componentDidMount(){
        document.body.addEventListener('click', this.handleClick);  //如果在这里绑定回调函数的this指向，其实就产生了传入匿名函数作为回调一样的问题
    }
    componentWillUnmount(){
        document.body.removeEventListener('click', this.handleClick);   //如果在这里绑定回调函数的this指向，其实就产生了传入匿名函数作为回调一样的问题
    }
    handleClick(){
        this.setState((prevState, props) =>{
            visible : !prevState.visible
        })
    }
    render(
        ...此处省略
    )
}