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

Question

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

在函数调用中传递括号

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

函数调用时不带括号

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

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

Answer 1

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

当组件呈现时，将执行所有语句并计算表达式。这是普通的 javascript，这就是 javascript 的工作原理。

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

this.handleButtonClick只是对函数的引用，它不会调用它。您需要将函数引用传递给onClickprop，以便稍后在单击实际发生时由 React 调用它。