示例:
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>
);
}
如果不使用箭头函数，则无论按钮单击与否，该函数都将在render（）上执行。 这就是为什么你设置了一个箭头函数，以防止这种行为。 在您的情况下，每次呈现时，如果不使用箭头函数语法，计数器将增加
当要将参数传递给事件处理程序时，可以使用arrow函数。 使用箭头功能是一种选择，而不是必须。
语法:
<button onClick={() => this.handleClick(id)} />
当您不想传递任何参数时，可以传递函数的引用。
<button onClick={this.handleClick}>Click Me</button>
重要事项:
编写箭头函数意味着在呈现时绑定任何函数。
<button onClick={this.handleClick.bind(this, id)} />
箭头函数是上述语法的替代。 所以，你可以选择使用箭头函数。 区别在于，在render中绑定函数会在组件每次呈现时创建一个新函数。 这意味着，在呈现时使用箭头函数或绑定函数会在应用程序中产生性能问题。
有关详细信息，请参阅以下文档:https://reactjs.org/docs/faq-functions.html
