onClose={handleClose}与()=>handleClose写法对比：哪种更优？

性能层面差异 #

• onClose={handleClose}：传递的是已定义函数的直接引用，每次组件渲染时不会创建新的函数实例。React对比props时，因引用一致，不会触发子组件的不必要重渲染（若子组件是纯组件或用memo包裹）。同时避免了重复创建函数的内存与计算开销，单次渲染差异虽小，但在高频渲染的组件（如长列表、动画组件）中，累积效应会提升整体性能。
• onClose={() => handleClose}：每次渲染都会生成一个全新的匿名函数实例，即使内部逻辑完全相同。这会让React判定props发生变化，触发子组件重渲染（无优化时），且重复创建函数会带来额外的微小开销。

架构设计层面区别 #

• 直接传递函数引用：更贴合React的props传递设计原则，保持引用稳定性，提升组件行为的可预测性，也更便于配合useCallback、memo等优化手段。这种写法代码更简洁，减少冗余逻辑，利于长期维护。
• 箭头函数包裹：仅在需要额外传参（如onClose={() => handleClose(itemId)}）的场景下有实际意义。若只是无参调用handleClose，这种写法属于冗余设计，会破坏函数引用的稳定性，增加组件优化的复杂度，也不利于依赖追踪。

实际场景建议 #

普通业务场景中，两种写法的性能差异几乎无法被用户感知，但从代码规范、可维护性和潜在优化空间来看，优先选择onClose={handleClose}的写法。只有当需要给handleClose传递额外参数时，再使用箭头函数包裹的形式，同时可配合useCallback来稳定函数引用，减少不必要的重渲染。

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