Skip to main content

文档｜React命名规范

在React 开发中，文件和文件夹的命名规范有助于提高代码的可读性和可维护性。通常，React 组件文件（.jsx 或.tsx）使用大驼峰命名法（PascalCase），而文件夹则根据内容类型使用小驼峰命名法（camelCase）或大驼峰命名法。

文件命名:​

  1. 组件文件：使用大驼峰命名法，例如 MyComponent.jsx 或 UserProfile.tsx。
  2. 普通JavaScript 文件：使用小驼峰命名法，例如 utils.js 或 apiClient.js。
  3. 样式文件：可以使用小驼峰或中划线命名，例如 styles.module.css 或 component-styles.css。
  4. 测试文件：可以使用组件名加上 test 或 spec 后缀，例如 MyComponent.test.js 或 UserProfile.spec.tsx。
  5. 根组件：如果一个组件是其所在目录的根组件，可以使用 index.js 或 index.jsx 命名。

文件夹命名:​

  1. 组件文件夹：使用大驼峰命名法，例如 MyComponent/。
  2. 功能/特性文件夹：使用小驼峰命名法，例如 userProfile/ 或 productListing/。
  3. 公共文件夹：使用小驼峰命名法，例如 utils/ 或 services/。
  4. 样式文件夹：可以使用 styles/ 或 css/。

其他建议:​

  1. 可读性：确保文件名和文件夹名清晰、简洁，能够准确表达其内容。
  2. 一致性：在整个项目中保持一致的命名风格，方便团队协作和代码维护。
  3. 避免歧义：避免使用过于通用或容易混淆的名称。
  4. 文件类型：明确的文件类型后缀，例如.js, .jsx, .ts, .tsx, .css, .scss。
  5. 常量：常量使用全大写字母和下划线分隔，例如 MAX_COUNT 或 API_URL。
  6. 方法和变量：方法和变量使用小驼峰命名法，例如 getUserInfo 或 userList。

由Google Gemini生成。