两种onClick箭头函数写法的核心差异咨询及实战问题

核心区别 #

• 第一种是直接执行逻辑的普通箭头函数：

  const onClickButton = (color) => {
    // 此处为函数触发后立即执行的逻辑
  }
  

  调用时会立刻运行函数体内代码，比如写onClick={onClickButton('red')}，页面渲染阶段就会执行这个函数，而非等待点击事件触发。

• 第二种是返回函数的高阶箭头函数：

  const onClickButton = (color) => () => {
    // 此处为点击事件触发后执行的逻辑
  }
  

  它先接收color参数，再返回一个新函数，这个返回的函数才是真正绑定给onClick的点击回调。比如onClick={onClickButton('red')}，页面渲染时仅返回待执行的函数，直到按钮被点击，内部逻辑才会触发。

你的场景下两种写法效果不同的原因 #

在前端框架的onClick事件绑定中，要求传递的是函数引用，而非函数执行的结果。

• 第一种写法里，onClickButton('red')会立刻执行，相当于给onClick传递了函数的返回值（未写return时为undefined），自然无法响应点击。
• 第二种写法里，onClickButton('red')返回的是一个待执行的函数，这个函数会被绑定为点击回调，点击按钮时才会触发颜色切换逻辑，因此能正常生效。

补充：第一种写法的正确使用方式 #

如果想用第一种写法，需要用匿名函数包裹，避免页面渲染时提前执行：

onClick={() => onClickButton('red')}

内容的提问来源于stack exchange，提问作者darshit khandelwal