我一直在努力学习 React 的基础知识。但是，我在教程中遇到了一个部分，要求我将alert()一个 onClick 事件放在里面：
<button className="square" onClick={() => {alert("click");}}>
{this.state.value}
</button>
我不明白为什么需要箭头函数 - 为什么我不能单独使用 alert() ？
文档状态：
忘记 () => 并编写 onClick={alert('click')} 是一个常见的错误，每次组件重新渲染时都会触发警报。
哪个是正确的 - 我试过这个，它确实不断地调用alert(). 但为什么？是不是应该触发 onClick，而不是渲染？匿名函数做了什么来阻止这种行为？
因为如果你调用一个函数，那么这个函数就会运行。（你从中得到返回值）
const onClick = alert("hello");
console.log(onClick);如果您定义了一个调用函数 (Y) 的函数 (X)，那么在您调用 X 之前它不会调用 Y。
const onClick = () => alert("hello");
console.log(onClick);调用（调用）函数alert()和定义（表达）函数之间基本上是有区别的() => {alert()}
当代码运行时，即当 react 渲染组件时，任何函数调用都会运行该函数，这就是我们可以在运行时使用IIFE (function() { } )()将函数注入 window 对象的原因。
但是，onclick={()=>{alert()}}不建议使用内联函数调用（如）处理事件，因为每次触发该事件时，都会创建该函数的新实例，这可能会降低您的应用程序的速度，
相反，您可以定义一个处理事件的函数，并在特定事件触发时调用它：
// Bad
render() {
return <button onclick={() => {this.setState({btnClicked: true})}}> Click! </button>
}
// Good
render() {
const handleClick = () => {
this.setState({btnClicked: true})
}
return <button onclick={handleClick}> Click! </button>
}
因为您需要一个仅在单击按钮时才调用的函数。如果你通过，alert('click')那么解析器将找到一个函数调用并在它遍历该文件时立即执行它。