js函数不同写法的区别

Question

 class App extends React.Component {         state = {             counter: 0,         };         handleClick=()=> {             const counter = this.state.counter;            this.setState({counter: counter + 1});         };                 //如果写成下面的形式，则点击无效，这两者区别是什么         handleClick(){             const counter = this.state.counter;            this.setState({counter: counter + 1});         };         render() {            return (                 <div>                     counter is: {this.state.counter}                     <button onClick={this.handleClick}>点我</button>                 </div>             )         }     }

Answer 1

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