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

Question

我正在学习React，并按照this tutorial创建一个简单的Tic-Tac-Toe游戏，你可以view here in CodePen.

我很担心箭头函数如何在Board组件的onClick函数内返回的Square组件的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处理程序返回一个函数，否则你不应该直接调用它。

上面的箭头函数执行将参数绑定到函数

的角色