React绑定onClick为什么要用箭头函数？

Question

最近开始学习react，刚看完官方的教程TicTacToe，对onClick事件绑定的语法不是很理解，所以来这里提问，求大家帮忙解答。下面是官方教程里的代码：其中这一段：  renderSquare(i) {    return (      <Square        value={this.state.squares[i]}        onClick={() => this.handleClick(i)}      />    );  }绑定onClick事件时，为什么不直接写成onClick={this.handleClick(i)}呢？箭头函数等同于function() {  return this.handleClick(i);}的话，那么我的理解两种写法应该是等效的，但第二种貌似过不了编译。刚入门很多不懂，求大家解答一下，十分感谢！

Answer 1

...
onClick={这里是一个函数或函数引用}
onClick={() => this.handleClick(i)}，这里面就是一个匿名函数，点击事件发生时，会执行这个匿名函数，匿名函数再调用handleClick函数(传参i)；其次才是this绑定的问题

Answer 2

因为箭头函数不会绑定自己的this，

如果不用箭头函数，需要手动绑定函数的this：onClick={() => this.handleClick.bind(this)(i)}

或者在定义的时候就用箭头函数：

handleClick = (i) => {

    //do it

}

onClick = {this.handleClick}