React中onClick事件处理器是否必须使用匿名回调函数？

我在学习React Hooks的在线课程时，看到讲师在onClick处理器中传入了匿名回调函数，示例代码如下：

return (
  <div className="counter">
    <button className="counter-action decrement" onClick={() => decrementScore()}> - </button>
    <span className="counter-score">{score}</span>
    <button className="counter-action increment" onClick={() => incrementScore()}> + </button>
  </div>
);

但我不理解为何需要使用匿名回调函数，尝试直接传递函数本身也能正常运行，我的代码如下：

const Counter = () => {
  const [score, setScore] = React.useState(0);

  const incrementScore = () => {
    setScore(prevScore => prevScore + 1);
  }

  const decrementScore = () => {
    setScore(prevScore => prevScore > 0 ? prevScore - 1 : 0);
  }

  return (
    <div className="counter">
      <button className="counter-action decrement" onClick={decrementScore}> - </button>
      <span className="counter-score">{score}</span>
      <button className="counter-action increment" onClick={incrementScore}> + </button>
    </div>
  );
}

想请教为何讲师要使用匿名回调函数，是否有必要这么做？

解答 #

这两种写法在你的场景里功能完全一致，但匿名回调的写法主要是为了应对需要额外传参的场景。

比如如果你的增减函数需要接收参数（比如每次加2、或者传递特定标识），直接写onClick={incrementScore(2)}的话，函数会在组件渲染时就立刻执行，而不是点击按钮的时候才触发——这时候就必须用匿名回调来包装，确保函数只在点击事件触发时才调用：

<button onClick={() => incrementScore(2)}> +2 </button>

另外，有些讲师可能是为了保持写法统一：不管函数是否需要传参，都用匿名回调的形式，避免新手混淆什么时候该直接传函数名、什么时候需要套一层回调。但在你这个不需要传参的场景里，直接传函数名的写法更简洁，性能上的差异也可以忽略（每次渲染会创建新的匿名函数，但这种开销在简单组件里完全没必要在意）。

总结下来：你的写法完全没问题，匿名回调不是必须的，它只是在需要给事件处理函数传参时才是刚需，讲师可能是提前演示这种更通用的写法而已。

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