react绑定事件你真的会写吗

使用react肯定会用到绑定事件。
绑定事件又有很多种写法，你之前的写法真的正确吗。

在render方法里绑定

doSomething(e){
  ...
}
render(){
return(
<div> 
  <span>{this.state.name}</span> 
  <a onClick={this.doSomething.bind(this)}></a>
</div>)
}

当然这种写法可以正常运行，但是当this.state.name改变的时候，这个组件会重新渲染。span会重新渲染，这是大家都知道的。
那么，a标签会重新渲染吗？
每次render()后，this.doSomething.bind(this)都会返回一个新的函数，react监听到绑定事件发生变化，a标签页会重新渲染。

在构造函数中绑定

  constructor() {
    this.doSomething = this.handleClickFunc.bind(this);
  }
doSomething(e){
  ...
}
return(
<div> 
  <span>{this.state.name}</span> 
  <a onClick={this.doSomething}></a>
</div>)
}

这种绑定方式在构造函数中绑定this，构造函数只会调用一次，这种写法每次render()方法调用不会重新渲染a标签.

使用箭头函数

doSomething=(data,e)=>{
  ...
}
return(
<div> 
  <span>{this.state.name}</span> 
  <a onClick={(e)=>this.doSomething(data,e)}></a>
</div>)
}

使用箭头函数同样在render()方法后不会重新渲染a标签