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

Question

我正在学习React，并按照本教程创建了一个简单的Tic-
Tac-Toe游戏，您可以在CodePen中查看。

对于在Board组件onClick的renderSquare函数内部返回的Square组件的属性中的箭头功能如何工作，我感到困惑onClick={() => this.props.onClick(i)}。同样，我拥有的游戏组件也同样如此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函数执行将参数绑定到函数的作用