新手上路,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能不能这么写），然后使用第二种写法。