React中onClick事件绑定不同函数调用方式的区别

React事件绑定的核心逻辑很简单：你传给onClick属性的必须是一个可执行的函数引用，这个函数只会在用户触发点击动作时被React调用。你列的四种写法实际效果差别非常大，逐个拆解：

• onClick={myFunction}
  这是最常用的标准无参绑定写法。这里直接把myFunction的函数引用传给了事件属性，组件渲染的时候不会执行函数内部逻辑，只有用户点击元素时才会触发调用，React会自动把原生事件对象作为参数传入这个函数。
  适合不需要传自定义参数、直接触发已有函数逻辑的场景。
• onClick={myFunction()}
  这种写法会在组件渲染的阶段就立刻执行myFunction()，最终传给onClick的是这个函数的执行返回值，而不是函数本身。如果你的myFunction执行后返回的不是另一个可执行函数，那点击元素的时候不会有任何反应，还会出现很多意料之外的bug：比如页面刚加载就弹出提示、自动触发跳转、请求提前发送这类问题。
  只有当myFunction是高阶函数（执行后返回真正用来处理点击事件的函数）时，这种写法才是合法的，普通业务场景下不这么写。
• onClick={()=>myFunction}
  这是一种错误写法。这里虽然传给onClick的是一个合法的箭头函数引用，点击时也会触发这个箭头函数，但箭头函数内部只是把myFunction这个函数引用返回了，根本没有调用执行它。最终效果就是点击之后myFunction里的逻辑完全不会跑，没有任何实际作用。
• onClick={()=>myFunction()}
  这是需要传自定义参数时的标准写法。外层的箭头函数作为引用传给onClick，渲染阶段不会执行内部逻辑，只有用户点击时才会先触发外层箭头函数，再在函数内部执行myFunction()。你可以自由给内部的myFunction传自定义参数，比如onClick={() => handleDelete(itemId)}，如果需要用到事件对象，也可以写成onClick={(e) => handleDelete(e, itemId)}。
  要注意的是，这种写法每次组件重新渲染都会生成一个新的箭头函数实例，如果把这个回调传给经过React.memo优化的子组件，可能会触发子组件不必要的重渲染，性能敏感场景可以配合useCallback做缓存优化。

快速排查绑定是否正确的小技巧：看大括号里的代码，渲染到这行的时候会不会立刻执行函数调用：如果直接写了带括号的函数调用、又没有外层箭头函数包裹，那就是渲染时就会执行；如果外层包了箭头函数，内部的函数调用只会在点击时触发。

内容的提问来源于stack exchange，提问作者Germán