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

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

在函数调用中传递括号

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

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

增量

在函数调用中不传递括号

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

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

增量

---

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

函数调用与函数之间有区别

呈现组件时，将执行所有语句并计算表达式。它是纯javascript，javascript就是这样工作的

this.handleButtonClick（）

是一个函数调用，因此一旦组件呈现，就会调用该函数。我假设

handleButtonClick（）

返回

undefined

，这将导致按钮呈现为

。现在，如果

onClick

是

undefined

，那么当单击实际发生时不会发生任何事情，因为没有要调用的函数

---

this.handleButtonClick

只是对函数的引用，而不是调用它。您需要将函数引用传递给单击onClickprop，以便在单击实际发生后，React可以调用该函数。

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

this.handleButtonClick（）

“onClick”不是这样工作的，如果您想手动调用可以使用的函数：

onClick={（）=>this.handleButtonClick（）}

---

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

如果绑定它，仍然可以执行方法（现在可以使用箭头绑定轻松实现）：

onClick={（）=>this.handleButtonClick（）}

，当使用函数引用而不是内联箭头函数加载页面时，它不会自动调用*。此外，在功能组件中，您应该使用

useCallback

来防止函数引用发生更改。在类组件中，函数应该是类的方法，就像OP已经做的那样。@AnteGulin，是的。我试图在最后一段中解释它的原因（在每次渲染中都重新创建）：“…您应该使用useCallback”也许不总是？：）你仍然可以引用一个在render方法中创建的函数，它仍然是一个引用，但是在每次渲染中它也会改变，因此我评论了进一步澄清。哦，完全误解了。是的，你说得对。在功能组件中使用引用并不重要。由于OP使用了

这个

，所以我解释了它，因为它们使用类组件，并且认为您以一般方式说“应该使用useCallback”是在提供有关函数组件的额外信息。