ReactJS中onClick绑定箭头函数与普通函数调用的效果差异疑问

React 的 onClick 事件要求传入函数引用，只有当点击事件触发时，React才会执行你传入的这个函数，三种写法的差异如下： #

1. 为什么 onClick={() => increaseCount()} 可以正常运行 #

你在这里传入的是一个箭头函数的引用给onClick，点击事件触发时，React会先执行这个箭头函数，箭头函数内部会主动调用increaseCount()，计数逻辑正常执行，所以功能正常。
另外补充一个等效的简化写法：onClick={increaseCount}，直接把increaseCount函数本身的引用传给onClick即可，不需要额外包一层箭头函数，点击时React会直接执行这个函数。 #

2. 为什么 onClick={increaseCount()} 无法生效 #

这里你给increaseCount加了括号，相当于在组件渲染阶段就立即执行了increaseCount函数，最终传给onClick的是函数执行的返回值（你的increaseCount没有定义返回值，所以返回的是undefined）。
这种写法不仅会导致点击时没有任何函数可以执行，还会因为渲染阶段直接修改状态触发组件重新渲染，反复循环造成无限重渲染的问题。 #

3. 为什么 onClick={() => increaseCount} 无法生效 #

这里的箭头函数内部只是把increaseCount函数本身作为返回值，没有调用它。点击事件触发时，React只会执行外层的箭头函数，并不会自动执行箭头函数返回的increaseCount，所以计数逻辑从来没有被触发，自然不会生效。

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