新手上路,js函数不同写法的区别跪求！

Question

classAppextendsReact.Component{
state={
counter:0,
};
handleClick=()=>{
constcounter=this.state.counter;
this.setState({counter:counter+1});
};
//如果写成下面的形式，则点击无效，这两者区别是什么
handleClick(){
constcounter=this.state.counter;
this.setState({counter:counter+1});
};
render(){
return(
counteris:{this.state.counter}
点我
)
}
}

Answer 1

我没用过React，但是大概能猜到原因，应该就是函数执行上下文的问题，第一种写法是箭头函数，App实例化时handleClick的this已经被绑定到当前实例了，而第二种写法则会在执行的时候确定上下文，如果你的button中的onclick会被编译成onclick="someInstance.handleClick"，那么执行时的this就会是window。为了确认，你可以把第一种写法改成普通的function的写法，或者把onclick里的东西改成this.handleClick.bind(this)`（不是很确定React能不能这么写），然后使用第二种写法。