标签:define https 直接 构造 传递 方式 代码量 com xtend
由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。
通常如果不是直接调用,应该为方法绑定this。绑定方式有以下几种:
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>
Click me
</button>
);
}
}
class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={()=>this.handleClick()}>
Click me
</button>
);
}
}
class Button extends React.Component {
handleClick=()=>{
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
方式2和方式3都是在调用的时候再绑定this。
方式1在类构造函数中绑定this,调用的时候不需要再绑定
方式4:利用属性初始化语法,将方法初始化为箭头函数,因此在创建函数的时候就绑定了this。
优点:创建方法就绑定this,不需要在类构造函数中绑定,调用的时候不需要再作绑定。结合了方式1、方式2、方式3的优点
缺点:目前仍然是实验性语法,需要用babel转译
方式1是官方推荐的绑定方式,也是性能最好的方式。方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。方式4目前属于实验性语法,但是是最好的绑定方式,需要结合bable转译
来源:https://segmentfault.com/a/1190000011317515
标签:define https 直接 构造 传递 方式 代码量 com xtend
原文地址:https://www.cnblogs.com/datiangou/p/10161746.html