将匿名函数作为props传递是否会引发性能问题？普通函数性能更优吗？

核心问题解答 #

1. 匿名函数作为props传递会产生性能问题吗？ #

大部分日常场景下，不会有明显的性能影响。但如果你的Button组件是用React.memo包裹的纯组件（依赖props浅比较避免不必要重渲染），情况就不一样了：每次渲染App时，匿名函数都会生成新的引用，这会让React.memo判定props发生变化，导致Button重复渲染。这种情况下会带来额外的渲染开销——但如果是普通组件（没做memo优化），这点差异完全可以忽略。

2. 组件每次渲染时，两种函数都会被重新创建吗？ #

没错。组件本身是一个函数，每次触发渲染时，函数体内部的所有代码都会重新执行一遍。不管是声明命名的handleClick函数，还是直接写匿名箭头函数，每次渲染都会生成全新的函数引用，两者在这一点上没有区别。

3. 普通函数相比匿名函数有性能提升吗？ #

几乎没有。从JS引擎的角度看，创建命名函数和匿名函数的开销差异微乎其微，完全达不到影响性能的程度。两者真正的差异不在性能本身，而是：

• 可读性与可维护性：命名函数的意图更清晰，代码结构规整，多人协作时更容易理解
• 调试友好性：命名函数在栈追踪信息里会显示函数名，出现问题时更容易定位
• 复用性：如果同一个逻辑需要在多个地方调用，命名函数可以直接复用，不用重复写代码

针对你给出的代码示例 #

在你的App组件里，两种写法在性能上没有本质区别——除非Button是经过React.memo优化的组件。如果想避免纯组件的不必要重渲染，不管是命名函数还是匿名函数，都需要用useCallback来缓存函数引用：

import { useCallback } from 'react';

function App() {
   // 缓存命名函数
   const handleClick = useCallback(() => {
       console.log('');
   }, []);

   // 缓存匿名函数（同样适用）
   const anonymousClick = useCallback(() => {
       console.log('');
   }, []);

   return(
     <>
      <Button onClick={handleClick} />
      <Button onClick={anonymousClick} />
     </>
    );
}

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