React组件内外声明无state/prop依赖静态变量有何差异

结论 #

选项A（变量声明在组件外部）的性能表现明显更好，确实可以节省内存、避免重复创建的开销，两种写法表现并不一致。

原因说明 #

• 函数组件的本质就是普通JS函数，每次组件触发重渲染（你示例里点击toggle修改show状态就会触发重渲染），整个函数体的代码都会完整执行一次。选项B中声明在组件内部的menu变量，会在每一次重渲染时都重新创建一个全新的数组实例，数组内的3个对象也都是全新的内存引用，旧的menu实例会直接成为垃圾等待回收。如果组件渲染频率很高，会产生大量无意义的内存占用和GC（垃圾回收）压力。
• 选项A中声明在模块顶层的menu变量，只会在当前JS模块第一次被加载时初始化一次，后续不管组件重渲染多少次、甚至创建多少个Example组件的实例，都会复用同一个menu引用，内存中永远只会保留这一份数据，完全没有重复创建和回收的开销。

补充说明 #

也有开发者会选择在组件内部用useMemo缓存这类静态变量：

const menu = React.useMemo(() => [
  { slug: '/a', label: 'Label A' },
  { slug: '/b', label: 'Label B' },
  { slug: '/c', label: 'Label C' },
], [])

这种写法虽然也能避免重渲染时重复创建，但依然要承担hooks调用的额外开销，性能还是不如直接将静态变量放在模块顶层。
唯一需要注意的例外场景：如果你的静态变量依赖只有运行时才能拿到的环境数据（比如客户端的window属性、服务端的环境变量等），无法在模块加载阶段就完成初始化，才需要选择内部缓存的方案。你示例里的纯静态菜单数据，完全适合放在组件外部。

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