React.js中const常量是否应该声明在函数组件外部？

核心疑问澄清 #

你对作用域的理解是正确的：函数内部声明的const仅在当前渲染周期的函数作用域内生效，不同渲染周期的作用域完全独立，不存在语法层面的「重复声明」报错。评审建议里提到的「重复声明」实际指运行时的重复创建开销，和语法错误是两个完全不同的概念。

另外你提到的 TypeScript 类readonly修饰符和函数组件内的const没有任何关联：类内部不允许用const声明成员是类的语法规则限制，readonly的作用是限制类成员实例化后不可修改，两者适用场景完全独立，不需要放在一起比较。

两种写法的适用场景 #

不存在「所有const都必须移到组件外部」的硬性规则，需要结合常量的属性判断：

适合移到组件外部的情况 #

当常量是完全独立于组件运行状态的静态值时，优先放到外部：

// 模块生命周期内仅创建一次，无重复开销
const DEFAULT_PAGE_SIZE = 10;
const OPERATION_SUCCESS_TIP = '提交成功';
const STATUS_ENUM = {
  PENDING: 0,
  SUCCESS: 1,
  FAILED: 2
}

export default function SomeComponent() {
  // 直接调用外部常量即可
  // ...
}

这种写法的收益有两个：

• 避免每次组件渲染重复创建常量值，复杂对象/数组类型的常量收益尤其明显
• 避免引用类型常量每次渲染生成新引用，减少子组件不必要重渲染、useEffect重复执行等意料之外的副作用

适合留在组件内部的情况 #

如果符合以下任意一种情况，const留在内部更合理：

• 常量的值依赖组件的props、state或其他仅渲染时能确定的动态值，只能在函数内部声明

export default function SomeComponent({ userId }) {
  // 依赖props，必须在内部动态生成
  const userInfoApi = `/api/v1/user/${userId}`;
  // ...
}

• 常量仅在组件内部某段小逻辑里临时使用，值非常简单，重复创建的开销可以忽略不计，留在内部反而可读性更高，不需要跳转到组件外部查找定义

内容的提问来源于stack exchange，提问作者Eduardo Oviedo Blanco