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

Question

我正在学习React,并按照本教程创建了一个简单的Tic-Tac-Toe游戏,您可以在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处理程序返回一个函数,否则你不应该直接调用它.

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