React中的this绑定
2017-12-05 本文已影响0人
追风的云月
在编写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绑定
