react如何定义常量
在 React 中定义常量的方法
在 React 中，常量通常用于存储不变的值，例如配置参数、静态数据或枚举值。以下是几种常见的定义方式：
使用 const 声明常量
在组件外部或内部使用 const 定义常量，适用于不会改变的值：
const API_URL = 'https://api.example.com';
const MAX_ITEMS = 10;
function Component() {
const LOCAL_CONST = 'value';
return <div>{LOCAL_CONST}</div>;
}使用枚举或对象组织常量
对于一组相关的常量，可以用对象或枚举（TypeScript）归类：
// 普通对象方式
const COLORS = {
PRIMARY: '#3498db',
SECONDARY: '#2ecc71',
};
// TypeScript 枚举
enum Status {
LOADING = 'loading',
SUCCESS = 'success',
}组件内通过 useMemo 缓存常量
若常量需要依赖其他值计算且需优化性能，可使用 useMemo：
function Component({ baseValue }) {
const computedConstant = React.useMemo(() => baseValue * 2, [baseValue]);
return <div>{computedConstant}</div>;
}配置文件分离常量
将常量集中管理在独立文件中（如 constants.js）：
// constants.js
export const SETTINGS = {
TIMEOUT: 5000,
ENV: 'production',
};
// 组件中引入
import { SETTINGS } from './constants';注意事项
- 常量命名通常使用全大写加下划线（如
API_KEY），但非强制 - 避免在组件内重复声明相同的常量，应提升到模块作用域
- 在 TypeScript 中可使用
as const断言确保不可变性：
const CONFIG = {
size: 10,
} as const;
