react 事件绑定this的三种方式
以下三种方式都能达到同样的效果。
性能排列:
方式二>方式三>方式一
首先,第三种方式性能是最差的,每次在render的时候都要去绑定this。
对于第二种和第三种,我们这样看其实看不出差别,但是如果我们将代码编译为ES5 之后,就能看到其中的区别了
import React from 'react'
export default class Demo extends React.Component{
constructor(props){
super(props);
this.click1.bind(this)//方式1: 在构造函数内绑定
}
click1(){
}
click2=()=>{//方式2: 使用箭头函数
}
click3(){
}
render(){
//方式3: 在render内绑定
return <div>
<button onClick={this.click2}></button>
<button onClick={this.click3.bind(this)}></button>
</div>
}
}
首先,使用箭头函数的方式,该方式其实是定义在this 上的,也就是说,在每一个实例化之后的this
都会定义该方法,但是通过方式1,该方式其实是定义在prototype
上的,各个实例对象共享该方法。所以,单纯从内存空间的消耗上来看,方式1其实是最好的。但是定义在原型链上的方法,在实际调用该方法的时候,其查找的过程是这样的: 首先检查this
上是否有该方法的定义,如果没有的话,则去prototype
上查找是否有该方法,所以在方法调用的过程中,会经历一次跨原型链的查找。该过程是方法1带来的额外的消耗。但是箭头函数的方式,在实际调用的时候,访问的是外层作用缓存的_this, 所以在作用域查找上有一层消耗。
上面是引用大佬的话;
对于初学者来讲。大体知道方式二是性能最优的,方式三是最差的就好了。自己平时写代码注意下;
react 事件传值的分析
我们知道了绑定事件,对于事件传值,我们可以重新考虑下。
<th value={column} onClick={this.handleSort.bind(null, column)}>{column}</th>
<th value={column} onClick={(event) => this.handleSort(column, event)}>{column}</th>
复制代码
总结
- this值的绑定首先推荐使用类属性箭头函数的方式来处理,其次是在构造函数中进行绑定。
- 事件函数传参可以抽离一个子组件或者从DOM属性获取来完成。不考虑性能可能在render函数中进行传参。
参考文章:
https://blog.csdn.net/weixin_34227447/article/details/88017936
https://blog.csdn.net/neoveee/article/details/80638986