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

Question

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

在函数调用中传递括号

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

在函数调用中不传递括号

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

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

Answer 1

函数调用和函数之间存在差异。

当组件呈现时，将执行所有语句并对表达式求值。很简单 javascript，这就是 javascript 的工作原理。

this.handleButtonClick() 是一个函数 call，因此一旦组件呈现，就会调用该函数。我假设 handleButtonClick() returns undefined 将导致按钮呈现为 <Button onClick={undefined} />。现在，如果 onClick 是 undefined，当点击实际发生时不会发生任何事情，因为没有要调用的函数。

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

Answer 2

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

this.handleButtonClick()

"onClick" 不是那样工作的，如果你想手动调用你可以使用的函数：

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

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

Answer 3

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

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

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

Answer 4

JS 将在您执行 OnClick(Func(params))

时在每个 Render 上执行该函数

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

改为这样做：

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

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

Why to pass function reference instead of method in onClick event of button in ReactJS?

event-handling

pass-by-reference

reactjs