React项目中Constants与Configs文件的区别及命名规范问询

一、命名规范 #

Constants文件 #

• 文件名：通用型的叫constants.js，如果是某模块专属常量，会加模块前缀，比如productConstants.js
• 变量名：全大写+下划线分隔，像你例子里的APPLE、BANANA，这是行业通用约定，一眼就能识别是不可变的原子常量

Configs文件 #

• 文件名：通用型的叫config.js，也可按功能细分，比如routeConfig.js、apiConfig.js
• 变量名：小驼峰命名，比如你例子里的appRoute、apiProduct，因为它们是结构化的配置集合，不是单个固定值

二、核心区别 #

1. 语义与用途本质不同 #

• Constants是项目中绝对固定的原子值，用来定义不会变更的枚举、状态标识、固定字符串等，比如业务里的订单状态（PENDING、PAID）、固定枚举值，这些值从项目启动到迭代都不会改。
• Configs是针对特定功能的可配置集合，用来管理和业务场景、运行环境相关的配置项，比如路由路径、API接口地址、第三方服务密钥等，这些值可能在开发/测试/生产环境中不一样，甚至可以动态生成（比如你例子里apiProduct.productId是根据ID生成路径的函数）。

2. 结构形式不同 #

• Constants都是单个独立的常量，每个值都是不可再拆分的原子项，比如：

// constants.js
const PENDING = 'PENDING';
const PAID = 'PAID';

• Configs是结构化的对象（或函数集合），把相关的配置项分组管理，方便维护和复用，比如你的路由配置把所有页面路径放在appRoute对象里，API路径放在apiProduct对象里，还能包含动态生成配置的函数。

3. 可变性不同 #

• Constants是硬编码的不可变值，一旦定义就不会在任何场景下改变，也不需要根据环境调整。
• Configs是可灵活调整的，比如生产环境的API域名是https://api.prod.com，开发环境是http://localhost:3001，可以通过环境变量（.env文件）注入不同配置值，甚至在运行时根据条件修改。

4. 复用范围不同 #

• Constants是跨模块通用的基础标识，比如多个组件、页面、工具函数都会用到的状态枚举，属于全局通用的基础值。
• Configs是针对特定功能模块的，比如路由配置只在路由注册、页面跳转时用，API配置只在发起请求的模块里用，属于功能专属的配置集合。

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