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) => {&nbsp; &nbsp; //do it}onClick = {this.handleClick}