为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

拉莫斯之舞 2019-12-06 15:31:52

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


对于在Board组件onClick的renderSquare函数内部返回的Square组件的属性中的箭头功能如何工作,我感到困惑onClick={() => this.props.onClick(i)}。同样,我所拥有的Game组件也同样如此onClick={ (i) => this.handleClick(i)}。我以为我可以不用箭头功能(就像一样onClick={this.handleClick(i)})来编写它,但这会中断游戏。


查看完整描述

2 回答

?
回首忆惘然

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


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

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


onClick={this.handleClick(i)} 

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


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


查看完整回答
反对 回复 2019-12-06
?
若吾皇

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

查看完整回答
反对 回复 2019-12-06

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信