React事件处理为何要传递函数引用而非直接调用执行？

两种写法的核心差异是「函数引用传递」和「函数执行结果传递」的区别 #

• 当你写onClick={goBack}时，你是把goBack这个函数本身的引用传递给了点击事件属性，相当于给React注册了一个回调规则：当用户触发按钮点击操作时，再执行这个函数。组件渲染阶段这个函数不会被触发，只有点击事件真实发生时才会运行里面的setQuestionIndex逻辑。
• 当你写onClick={goBack()}时，JSX在组件渲染解析的阶段就会立即执行一次goBack函数，然后把函数执行后的返回值（你写的这个goBack没有定义返回值，所以返回的是undefined）传递给onClick。这种写法会带来两个问题：
  1. 组件一渲染就会触发setQuestionIndex修改状态，导致组件重复重渲染，极端情况会直接陷入无限重渲染的死循环
  2. 后续用户点击按钮时不会触发任何逻辑，因为此时onClick绑定的是undefined，不是可执行的函数

如果你的场景需要给事件处理函数传递参数，也不能直接写onClick={goBack(id)}，可以套一层匿名函数处理：onClick={() => goBack(id)}，这种写法是把匿名函数的引用传给onClick，点击时才会执行匿名函数内部的带参调用，不会触发渲染阶段立即执行的问题。

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