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

Posted 2023-02-21

【中文标题】React：每次渲染都会调用 onClick 处理程序？

【英文标题】：React: onClick handler is getting called on every render?

【发布时间】：2017-05-31 23:57:54

【问题描述】：

我在学习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)），但这会破坏游戏。

【问题讨论】：

粗略解释：onClick 采用在事件触发时执行的函数。当() => this.foobar(blah) 完成时，创建一个箭头函数，它使用参数blah 执行foobar。你不能做this.foobar(blah) 的原因是因为它会执行函数并传递返回值。 onClick 需要一个函数执行，而不是一个值。

看到这个：***.com/questions/29810914/…

您可能还想阅读facebook.github.io/react/docs/handling-events.html

【参考方案1】：

onClick 需要一个函数。箭头函数没有自己的this；使用封闭执行上下文的this 值。 箭头函数是以下的替代品

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

当你运行它时它不起作用

onClick=this.handleClick(i) 

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

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

【讨论】：

我认为如果不知道handleClick 里面是什么，就无法得出这个结论，它还不如给你一个新的函数回调作为一个值。当然它适合这个问题，但它真的取决于handleClick 函数在做什么

@Icepickle，是的，你是对的，这是我的一个旧答案，没有那个解释，我正在编辑它，提供更多细节。