react如何定义常量

定义组件级常量

在React组件内部，可以通过const或let声明常量或变量。常量通常用于存储不变的值（如配置、静态数据），推荐使用const以避免意外修改。

function MyComponent() {
  const MAX_ITEMS = 10; // 组件内常量
  const theme = { primary: "#3498db" }; // 对象常量（属性可修改，需注意）

  return <div>Max Items: {MAX_ITEMS}</div>;
}

定义全局常量

如需跨组件共享常量，可单独创建模块文件（如constants.js）导出常量，再通过导入复用。

// constants.js
export const API_URL = "https://api.example.com";
export const DEFAULT_TIMEOUT = 5000;

// 组件中使用
import { API_URL, DEFAULT_TIMEOUT } from './constants';

常量命名规范

• 使用全大写字母和下划线（如API_KEY）区分普通变量。
• 若为对象或数组，需注意引用类型内部值仍可修改，必要时使用Object.freeze()冻结对象。

const CONFIG = Object.freeze({
  env: "production",
  features: { analytics: true }
});

类组件中的常量

类组件中可将常量定义为静态属性或实例外部的const。

class MyComponent extends React.Component {
  static MAX_USERS = 100; // 静态属性

  render() {
    return <div>Max Users: {MyComponent.MAX_USERS}</div>;
  }
}