React中JSX外创建点击处理器是否有性能提升？两种写法对比

你的理解完全正确——这两种写法不存在性能差异，每次Parent组件重新渲染时，两个点击处理器都会被重新创建为新的函数实例。

具体来说：

• 组件渲染时，函数组件的整个函数体都会执行一遍。不管是在组件主体里声明的handleClick，还是JSX内联的箭头函数，都是在每次渲染过程中生成全新的函数对象。
• 对于React内置的button组件而言，虽然它内部会对props做浅比较，但这两种写法传递的都是新函数，触发的比对逻辑和开销是一样的，不会有谁比谁更快。

唯一的区别只在于代码的可读性和可维护性：把点击逻辑抽成命名函数，在逻辑复杂或者需要多处复用的时候更清晰；内联写法在逻辑简单时更简洁直观，但这些都和性能无关。

只要没用到useCallback这类记忆化工具，这两种写法的性能表现完全一致，你没有遗漏任何关键细节。

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