为什么在 ReactJS 中按钮的 onClick 事件中传递函数引用而不是方法？答案

【问题标题】：Why to pass function reference instead of method in onClick event of button in ReactJS?为什么在 ReactJS 中按钮的 onClick 事件中传递函数引用而不是方法？
【发布时间】：2019-07-24 09:00:19
【问题描述】：

每当我在按钮的 onClick 中传递函数括号时，即使没有单击按钮，它也会在页面加载时自动调用。但是当我没有在按钮的onClick中传递函数括号时，它只会在按钮被点击时调用。

在函数调用中传递括号

<button onClick={this.handleButtonClick()}>Increment</button>

在函数调用中不传递括号

<button onClick={this.handleButtonClick}>Increment</button>

为什么每当我将括号传递给函数时，函数会在页面加载时自动调用，即使它是写在按钮的 onClick 内？

【问题讨论】：

绑定还是可以做方法的（现在使用箭头绑定很容易实现）：onClick={() => this.handleButtonClick()}，然后页面加载时不会自动调用

标签： reactjs event-handling pass-by-reference

【解决方案1】：

函数调用和函数是有区别的。

当一个组件渲染时，所有的语句都被执行并且表达式被计算。这是普通的 javascript，这就是 javascript 的工作原理。

this.handleButtonClick() 是一个函数call，因此该函数将在组件渲染后被调用。我假设handleButtonClick() 返回undefined，这将导致按钮呈现为<Button onClick={undefined} />。现在，如果onClick 是undefined，那么当点击实际发生时什么都不会发生，因为没有要调用的函数。

this.handleButtonClick 只是一个函数的引用，它不会调用它。您需要将函数引用传递给 onClick 属性，以便 React 稍后在实际发生点击时调用它。

【讨论】：

【解决方案2】：

它会自动调用，因为您正在通过以下方式立即调用它：

this.handleButtonClick()

“onClick”不是这样的，如果你想手动调用你可以使用的功能：

onClick={() => this.handleButtonClick()}

如果您使用函数引用，这将自动完成。因此，您不需要调用它或使用回调函数。实际上，使用函数引用更好，因为该函数不会在每次渲染中重新创建。

【讨论】：

使用函数引用而不是内联箭头函数更好*。此外，在功能组件中，您应该使用useCallback 来防止函数引用发生变化。在类组件中，函数应该是类的方法，就像 OP 已经做的那样。
@AnteGulin，嗯，是的。我试图在我的最后一段解释它的原因（在每次渲染中重新创建）:) “......你应该使用 useCallback” 也许并不总是？ :) kentcdodds.com/blog/usememo-and-usecallback
您仍然可以引用在渲染方法中创建的函数，它仍然是一个引用，但在每次渲染中也会发生变化，因此我发表评论以进一步澄清。
哦，完全被误解了。是的，你是对的。在功能组件中使用引用无关紧要。由于 OP 使用this，我解释它是因为他们使用类组件，并认为您通过说“应该使用 useCallback”作为一般方式来提供有关功能组件的额外信息。

【解决方案3】：

函数引用和函数调用是有区别的。

当您设置动态值时： this.handleButtonClick() 这意味着您将在组件呈现到页面后立即调用该函数。

但是当你只是传递函数的引用时 this.handleButtonClick 这意味着 React 只有当用户点击它时才会调用这个函数。

【讨论】：

【解决方案4】：

当你OnClick(Func(params))时，JS会在每次渲染时执行函数

因为你调用的是一个函数而不是传递它。

改为这样做：

OnClick ( ()=> {Func(params) } )

【讨论】：

我想你错过了}。你能检查一下你的语法吗？