在回调函数中使用箭头函数
优势:很容易让人看懂。
缺点:
在每次render时候,都会产生一个匿名函数。如果此组件作为一个子组件,那么父组件render的时候,子组件也可能会重新渲染,消耗性能。
class ToggleBtn extends React.component{
constructor(){
super();
this.state = {
isToggleOn:true
}
}
handleClick(e){
this.setState({
isToggleOn:!this.state.isToggleOn
})
}
render(){
return(
<div>
<button onClick={(e) => this.handleClick(e)}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
</div>
)
}
}
在构造器中绑定this
优势:通用。
缺点:繁琐,每次都得手动绑定this。
class ToggleBtn extends React.Component{
constructor(){
super()
this.state = {
isToggleOn:true
}
// 这个bind方法是必须的,以确保`this`可以在回调函数handleClick中使用
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
this.setState({
isToggleOn:!this.state.isToggleOn
})
}
render(){
return(
<div>
<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
</div>
)
}
}
使用类字段语法
优点:简单方便
缺点:ES7功能,实验性属性,可能不兼容,需要babel处理
class ToggleBtn extends React.Component{
constructor(){
super();
this.state = {
isToggleOn:true
}
}
// 这个语法确保`this` 绑定在handleClick中
handleClick = (e) =>{
this.setState({
isToggleOn:!this.state.isToggleOn
})
}
render(){
return(
<div>
<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
</div>
)
}
}