结合React.memo示例解析JavaScript同名变量函数无重复声明报错原因

你遇到的这个情况是JavaScript对命名函数表达式的标准设计，具体逻辑如下：

• 你代码中作为React.memo入参的function MyComponent(props) {}属于命名函数表达式（Named Function Expression），而非函数声明。按照ES规范，命名函数表达式的名称仅在函数自身的内部作用域中生效，不会被注册到外层作用域。
• 外层通过const MyComponent声明的变量，是唯一注册到当前外层作用域的标识符，和内部的函数名不存在同作用域重名的问题，自然不会抛出重复声明的语法错误。

你可以通过下面的代码直观验证这个规则：

const outerVar = function innerFunc() {
  // 函数内部可以正常访问innerFunc，指向函数本身
  console.log('inner scope:', innerFunc);
}

// 外层作用域访问innerFunc会直接报错，证明它没有被注册到外层
console.log('outer scope:', innerFunc); // Uncaught ReferenceError: innerFunc is not defined

补充说明：如果是直接在当前作用域写function MyComponent() {}（即函数声明写法），才会在外层作用域注册对应标识符，此时和同作用域的const MyComponent才会产生重复声明冲突。

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