反应：onClick处理程序在每个渲染上都被调用？

Question

我正在学习React，并按照本教程创建了一个简单的Tic-Tac-Toe游戏，您可以在CodePen中查看。对于在Board组件onClick的renderSquare函数内部返回的Square组件的属性中的箭头功能如何工作，我感到困惑onClick={() => this.props.onClick(i)}。同样，我所拥有的Game组件也同样如此onClick={ (i) => this.handleClick(i)}。我以为我可以不用箭头功能（就像一样onClick={this.handleClick(i)}）来编写它，但这会中断游戏。

Answer 1

onClick期望功能。箭头功能没有自己的功能this; 使用this封闭执行上下文的值。箭头功能可替代以下功能

onClick={this.handleClick.bind(this,i)}

当您像这样运行时它不起作用

onClick={this.handleClick(i)} 

因为在这种情况下，它将调用一个函数，并且将传递一个返回值，该值将在每次调用render时进行评估。因此，如果您在onClick函数中执行某些操作导致例如重新渲染，则setState您的应用程序将陷入无尽的循环。因此onClick需要一个函数而不是一个值，因此除非您从onClick处理程序中返回一个函数，否则不应直接调用它。

上面的Arrow函数执行将参数绑定到函数的作用

Answer 2

粗略解释：onClick采取在事件触发器上执行的功能。当() => this.foobar(blah)完成后，即创建一个箭头函数执行foobar带参数blah。您无法执行此操作的原因{this.foobar(blah)}是，这将执行该函数并传递返回值。onClick需要一个函数执行，而不是一个值。