react中的事件处理:在哪些情况下，我们需要对事件使用箭头函数，什么时候我们只需要传递类方法(函数)

Question

示例：

1(

<button onClick="{this.handleClick}">
Click me
</button>

<button onClick={() => this.handleClick()}>

为什么我们不能直接传递一个函数？我的意思是为什么我们这里需要一个箭头函数。

import React, { useState } from "react";
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>you clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>click me</button>
</div>
);
}

Answer 1

如果不使用箭头函数，无论单击按钮如何，该函数都将在render((上执行。这就是为什么要设置一个箭头函数来防止这种行为。在每次渲染的情况下，如果不使用箭头函数语法，计数器将增加

Answer 2

当您想将参数传递给事件处理程序时，可以使用箭头函数。使用箭头功能是一种选择，而非必要。

语法：

<button onClick={() => this.handleClick(id)} />

当您不想传递任何参数时，可以传递函数的引用。

<button onClick={this.handleClick}>Click Me</button>

重要信息：

编写箭头函数意味着在渲染时绑定任何函数。

<button onClick={this.handleClick.bind(this, id)} />

箭头函数是上述语法的替代语法。因此，您可以选择使用箭头功能。不同的是，每次组件渲染时，在渲染中绑定一个函数会创建一个新函数。这意味着，在渲染时使用箭头函数或绑定函数可能会在应用程序中产生性能问题。

有关更多详细信息，请参阅本文档：https://reactjs.org/docs/faq-functions.html