Javascript 为什么我需要将匿名函数传递到onClick事件中？

我一直在努力学习React的基本知识。但是，我在教程中遇到了一个部分，要求我在onClick事件中放置一个

alert（）

：

        <button className="square" onClick={() => {alert("click");}}>
            {this.state.value}
        </button>

{alert（“click”）；}>
{this.state.value}

我不明白为什么需要arrow函数-为什么我不能单独使用alert（）呢

文件规定：

忘记（）=>和编写onClick={alert（'click'）}是一个常见的错误，每次组件重新呈现时都会触发警报

---

这是正确的-我已经尝试过了，它会不断调用

alert（）

。但是为什么呢？它不应该在渲染时触发onClick吗？匿名函数是如何停止这种行为的？

因为您需要一个只在单击按钮的瞬间被调用的函数。如果您传递了

alert（'click'）

，那么解析器将找到一个函数调用，并在遍历该文件时立即执行它

因为如果调用函数，那么函数就会运行。（并从中获得返回值）

const onClick=alert（“hello”）；
console.log（onClick）基本上，调用（调用）函数
alert（）
和定义（表达）函数
（）=>{alert（）}

当代码运行时，即react呈现组件时，任何函数调用都将运行该函数，这就是为什么我们可以在运行时使用
（function（）{}）（
将函数注入窗口对象

但是，不建议使用内联函数调用（如
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>
}

//坏的
render（）{
返回{this.setState（{btnClicked:true}}}}>单击！
}
//好
render（）{
常量handleClick=（）=>{
this.setState（{btnClicked:true}）
}
返回点击！
}
因为您正在传递要调用的函数，而不是调用函数并传递结果<代码>{alert（“click”）}

正在调用函数，如

{（（）=>alert（“click”）（）}

。