今天给大家分享一下react绑定事件的四种方法，也许会有不准确的地方，欢迎指点出来，大家一起进步~
首先要先了解，在js中class的方法默认不会绑定this，默认情况下是undefined，所以就需要我们手动的去绑定this，这样才能在回调函数中使用到this。
第一种方法：在构造器中绑定this（这也是官方推荐的方法）
export default class Test extends Component {constructor(props){super(props)this.handleClick = this.handleClick.bind(this)}handleClick(){console.log('点击了',this)}render(){return (<div onClick={ this.handleClick }>click btn</div>)}}
优点就是这种方法只会生成一个方法实例，并且绑定一次以后可以多次使用。
第二种方法：属性初始化器语法(class fields)绑定回调函数
export default class Test extends Component {handleClick=()=>{console.log('点击了',this)}render(){return (<div onClick={ this.handleClick }>click btn</div>)}}
这种方法的好处就不用说了，首先在代码上就精简了很多。但是官方文档中说这个是"实验性"的语法，所以还是需要babel转义的。不过Create ReactApp默认是启用这种语法的，所以还是可以放心使用的。
第三种方法：在调用的时候绑定this
export default class Test extends Component {handleClick(){console.log('点击了',this)}render(){return (<div onClick={ this.handleClick.bind(this) }>click btn</div>)}}
第四种方法：使用箭头函数绑定this
export default class Test extends Component {handleClick(){console.log('点击了',this)}render(){return (<div onClick={ ()=> this.handleClick() }>click btn</div>)}}
第二、三、四种方法的好处就是在不需要state的时候，不用额外的多写一个constructor构造函数。
但是第三、四种方法的问题在于每次渲染这个组件的时候，都会创建不同的回调函数，这样会对性能产生影响，而且如果和子组件通讯时作为props传入子组件，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为新的属性在传递。
所以如果考虑性能问题的话，还是应该避免第三种和第四种的写法。官方推荐的还是第一种和第二种方法来绑定this。
