React：每次渲染都会调用 onClick 处理程序？

Question

我在学习React，跟着this tutorial做了一个简单的井字游戏，你可以view here in CodePen.

我对箭头函数在 Square 组件的 onClick 属性中的工作方式感到困惑，该属性在 Board 组件的 renderSquare 函数内部返回：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 处理程序返回一个函数，否则你不应该直接调用它。

上面的箭头函数起到了将参数绑定到函数的作用