JSW

react 文件命名推荐

🕐
2种命名规范推荐、对比

你说得完全正确，而且非常关键！
我必须立刻补充这个巨重要的 Git 大小写不敏感坑——这是 React 组件命名里最容易翻车的实战问题。

先直接给结论：
在 Windows / macOS 下，Git 默认不区分文件名大小写！
DashBoard → Dashboard
Git 会认为文件没变，导致：

  • 本地正常
  • 服务器报错：找不到文件
  • 团队协作混乱
  • 热更新、打包失效

而 abc-component（kebab-case）
因为全小写 + 连字符，完全不存在大小写问题，从根源上规避 Git 灾难。

1. 你遇到的真实 Git 灾难（绝大多数人踩过）

你把文件：
DashBoard.jsx → 重命名为 Dashboard.jsx

在 macOS / Windows 上：

  • 系统认为文件名没变
  • Git 不记录这次修改
  • 你提交、推送 → 服务器（Linux）找不到文件
  • 直接编译报错：Module not found

修复起来非常麻烦，必须手动执行：

git mv -f DashBoard.jsx Dashboard.jsx

而且团队每个人都要操作，否则一直报错。

2. 为什么 abc-component 反而更安全？

因为：
✅ 全小写
✅ 没有大小写变化
✅ Git 永远不会识别错

abc-component.jsx
不管你在什么系统，它永远是这个名字，100% 不会出现 Git 大小写冲突。

3. 那 React 组件到底该怎么命名？（最稳妥最终版）

我给你一个行业现在最平衡、最安全、不踩坑的方案：

✅ 最佳实践（兼顾 React 规范 + Git 安全）

组件文件名：全小写 + 连字符（kebab-case）

dashboard.jsx ❌ 不好
dashboard-component.jsx ❌ 冗余
abc-component.jsx ✅ 标准
user-profile.jsx ✅ 标准
button.jsx ✅ 最简单安全

组件内部名称：PascalCase

// user-profile.jsx
export default function UserProfile() {
  return <div/>
}

导入使用：

import UserProfile from './user-profile'

4. 为什么这个方案是最稳的？

优点：

  1. Git 永远不出错（全小写无大小写问题）
  2. 符合 JSX 语法（组件名大写，文件小写不影响）
  3. 跨系统 100% 兼容（Windows / macOS / Linux 都一致）
  4. Next.js、Nuxt、Vue 全部通用
  5. Vite、Webpack 不会热更新异常
  6. 搜索文件更快（小写统一）

唯一缺点（几乎可以忽略）：

文件名和组件名不完全一样
但这完全不影响代码运行，只是风格问题。

5. 最终总结（最实用的结论）

如果你追求：

  • 绝对不踩 Git 坑
  • 跨系统安全
  • 团队协作稳定
  • 不搞奇奇怪怪的报错

👉 组件文件用：全小写 + 连字符（kebab-case）
user-profile.jsx
dashboard.jsx
button.jsx

如果你追求：

  • 严格遵循传统 React 风格
  • 文件名 = 组件名
  • 不在乎 Git 大小写坑

👉 用 PascalCase
UserProfile.jsx

最直白的一句话

在真实项目里，小写连字符反而比大驼峰更安全、更工程化！
你刚才的观点完全正确，是实战经验之谈。

需要我给你一套企业级 React 命名规范（最稳定版） 吗？直接复制就能用。

🔗 参考链接