React中的this绑定

在编写react组件时经常需要进行函数的this绑定，使用ES6方式创建的组件中的函数必须手动绑定this，this代表当前组件实例对象，react中有三种绑定方式：

1.构造函数中完成绑定

class Details extends React.Component {
    constructor(props) {
    this.Sort=this.Sort.bind(this)
}

2.在组件中创建函数的时候使用箭头函数进行this绑定

bindThisFun = () => {
  ...
}
<div onClick={this.bindThisFun()}></div> 

<div onClick={()=>this.handleClick()}></div> 
//或者直接在使用时定义

箭头函数没有自己的上下文，它会使用被定义的时候的this作为上下文。

3.调用函数时使用bind方式进行this绑定

<a onClick={this.getExcel.bind(this)} id="ouputExcel">导出报告</a>

4.如果需要在react事件函数中传参

例如点击a标签时，传入一个值，可以使用bind：

<ImeiForm callback={this.searchImei.bind(this,Config.homepageIMEISearch)}/>

或者使用箭头函数：

<Link onClick={()=>{this.showDetail('event',Config.homepageThreatenEventDtl,value.name)}}>详情</Link>

不推荐的绑定方式

之前看到一篇很好的译文，里面讲解了绑定方式之间的区别，这里借鉴一下。
箭头函数绑定this时，因为箭头函数定义在render内部，组件每次重新渲染都会创建一个新的箭头函数，在React中渲染是很快捷的，所以重新渲染会经常发生，这就意味着前面渲染中产生的函数会堆在内存中，强制垃圾回收机制清空它们，这是很花费性能的。

function test() {}

const testCopy = test
const boundTest = test.bind(this)

console.log(testCopy === test) // true
console.log(boundTest === test) // false

.bind并不修改原有函数，它只会返回一个指定执行上下文的新函数（boundTest和test并不相等），因此垃圾回收系统仍然需要回收你之前绑定的回调。

最佳的绑定方式

在定义时写一个箭头函数 然后绑定到组件的事件上 也就是在组件中创建函数的时候使用箭头函数进行this绑定

https://juejin.im/post/5b13c3a16fb9a01e75462a64