背景
最近在帮同事 CR 的时候，频繁发现这样一个小细节：在给组件绑定点击事件时，很多人喜欢写成👇这样：
jsx
<button onClick={() => handleClick()} />而不是简洁的：
jsx
<button onClick={handleClick} />这引起了我的一些思考。为什么会有这么多开发者选择第一种写法？这是不是一种"看似合理其实冗余"的代码习惯？今天我想聊一聊这个常见但容易被忽视的写法问题。
正文
两种写法有何不同？
我先明确一点，这两种写法在行为上大多数情况下是等价的，但它们背后的语义、性能、维护性却不尽相同。
第一种写法
jsx
onClick={() => handleClick()}含义是：定义了一个新的匿名函数，在点击时调用 handleClick。
第二种写法
jsx
onClick={handleClick}含义是：直接将 handleClick 函数本身作为回调传入。
❓为什么会选择箭头函数？
在我和同事交流时，发现他们使用箭头函数的原因五花八门：
1. "防止提前调用"误解
不少初学者误以为：
jsx
onClick={handleClick()}会立即执行，所以为了"保险"，就总是包上一层箭头函数：
jsx
onClick={() => handleClick()}但其实你只要不加括号 ，handleClick 就不会执行：
✅ 正确：onClick={handleClick}
❌ 错误：onClick={handleClick()}（这个才是会立即执行的）
2. 想传参数
这个其实是使用箭头函数的合理理由：
jsx
onClick={() => handleClick(1)}你确实需要用匿名函数包裹，才能在点击时传参。
但问题是，很多人即使不传参数 ，也保留了这层箭头函数 ------ 这就是不必要的冗余。
多一层箭头函数的代价
虽然这样写不会导致程序错误，但它确实有一些负面影响：
1. 每次渲染都会创建一个新函数
简单回顾React父子组件通信时的渲染规律：
当父组件传递匿名函数给子组件时：
- 子组件接收到新的函数引用
- 触发子组件的重新渲染（即使 props/data 未变化）
- 如果子组件是纯组件（PureComponent/memo），仍需进行浅比较
- 复杂组件树将产生级联渲染
React 中，每一次渲染都会重新执行 JSX，也就是说：
jsx
onClick={() => handleClick()}这里的箭头函数在每次渲染时都会重新生成一个新的函数对象。虽然这个性能消耗在大多数场景下可以忽略，但在高频渲染 或大规模组件树中，这种不必要的重新创建会积少成多。
特别是在使用 memo、useCallback 等优化手段时，这种匿名函数会直接导致缓存失效。
2. 调试和测试变得困难
匿名函数在调试工具中往往显示为 anonymous，不像具名函数 handleClick 那样容易定位。
如果你希望写更清晰、可维护、可测试的代码，直接传函数引用会更好。
3. 团队规范难以统一
在一个团队中，如果有些人喜欢写箭头函数，有些人喜欢写函数引用，会增加代码风格的混乱，影响可读性和统一性。
推荐做法总结
| 使用场景 | 推荐写法 |
|---|---|
| 无需传参，直接调用处理函数 | onClick={handleClick} |
| 需要传参或处理额外逻辑 | onClick={() => handleClick(id)} |
| 为了优化性能（尤其是大量列表） | 配合 useCallback 避免匿名函数 |
实际案例对比
jsx
// 不推荐写法（冗余）
<button onClick={() => handleClick()} />
// 推荐写法（更简洁、更高效）
<button onClick={handleClick} />最后的思考
前端开发中，很多"坑"其实不是语法错误，而是语义不清晰 、冗余逻辑 ，或者误以为正确的习惯。就像这个 onClick 的问题，虽然表面上没什么大问题，但当深入理解背后的机制后，才能写出更优雅、可维护、可扩展的代码。
希望这篇文章也能让更多前端开发者对"箭头函数 vs 函数引用"有更清晰的认知。
如果正在看这篇文章的你在 CR 的过程中，遇到类似的细节问题，不妨也写下来，作为团队的最佳实践积累。毕竟，代码不是写给机器看的，而是写给人看的。