React如何定义公共常量

定义全局常量

在React中，可以通过创建一个单独的常量文件来定义公共常量。新建一个文件如constants.js，导出所有公共常量：

export const API_URL = 'https://api.example.com';
export const MAX_ITEMS = 10;
export const DEFAULT_TIMEOUT = 5000;

使用环境变量

对于敏感或环境相关的常量，使用.env文件定义环境变量：

REACT_APP_API_URL=https://api.example.com
REACT_APP_DEBUG_MODE=true

在代码中通过process.env访问：

const apiUrl = process.env.REACT_APP_API_URL;

使用Context API

对于需要全局访问且可能变化的常量，使用React Context：

import React, { createContext } from 'react';

const AppConstants = createContext({
  theme: 'light',
  language: 'en',
});

export default AppConstants;

使用自定义Hook

封装常量到自定义Hook中，便于复用：

function useConstants() {
  return {
    colors: {
      primary: '#3498db',
      secondary: '#2ecc71',
    },
    sizes: {
      small: 12,
      medium: 16,
    },
  };
}

类型化常量(TypeScript)

在TypeScript项目中，可以为常量添加类型：

interface AppConstants {
  readonly API_BASE: string;
  readonly FEATURE_FLAGS: {
    readonly NEW_UI: boolean;
  };
}

export const CONSTANTS: AppConstants = {
  API_BASE: 'https://api.example.com',
  FEATURE_FLAGS: {
    NEW_UI: true,
  },
};