React文件名和目錄規范最佳實踐記錄(總結篇)

Posted on by

React在使用時非常靈活，如果沒有一個規范約束項目，在開發過程中會非常混亂，本文將介紹幾個優秀的規范。

文件類型

介紹文件名和目錄前，需要先簡述一下幾種通用的類型，用來區分文件的功能。

  • component 組件文件
  • page 如果有路由(React Router、NextJS等)，則有頁面文件
  • util 需要復用的工具函數
  • helper 一段特定邏輯，不是通用工具，可復用也可僅作為代碼拆分片段
  • hook 自定義React Hook
  • constant 定義常量，大寫+下劃線命名 CONSTANT_VALUE

處理index文件

在做組件或者頁面的時候，你可能會劃分組件，並把主組件用index.tsx導出。這樣做的時候有一個好處就是可以按照文件夾名引入，從結構上看是很清晰的。

但是事實上，在編輯器中會有多個index.tsx文件，開發時需要看文件所在的文件夾，非常難受。

我的解決方案是，你的主組件應該和原來一樣導出，index.ts 文件二次導出主組件。

你的 index.ts 應該這樣寫：

export * from './MainComponent';
export { default } from './MainComponent';

雖然把一個文件變成瞭兩個文件，但是有效地減少瞭開發時的心智負擔。

接下來規范中所有的 index.ts 都是這個作用

規范

類型文件夾

這應該是一個比較官方的規范，很多項目都在使用。

此處使用大駝峰命名組件（component）和頁面（page），其他文件通常用小駝峰

如果你有路由，那麼此時component中的組件應為通用組件。

src/
├── components/
│   ├── MyHeader.tsx
│   └── MyFooter.tsx
├── pages/
│   ├── Home.tsx
│   ├── About.tsx
│   └── Widget/
│       ├── components/
│       │   ├── Tool.tsx
│       │   └── Option.tsx
│       ├── helpers/
│       │   └── setOptionStorage.ts
│       ├── Widget.tsx
│       └── index.ts
├── hooks/
│   └── useTheme.ts
├── utils/
│   └── getRamdomNumber.ts
└── constants.ts

這個規范在小項目中尚可實行。但是如果相對復雜的項目，由於文件夾層數多，會導致引入混亂。接下來會推薦特性分類的規范。

示例項目：Ant Design Pro

特性文件夾

特性文件夾分類很好地解決瞭層數過多的問題，增加平鋪的可能。並更直觀地展示瞭代碼邏輯，方便維護。

大駝峰命名

這種命名規范中，除瞭組件和頁面以外，所有的文件都需要添加類型後綴。
並且在一個特性中，可以將類型相同的函數放在一個文件內。
例如 Widget.helper.ts Widget.util.ts

如果是通用的或復用的代碼，都建議放到 common 文件夾統一管理，其餘特性文件夾均大寫。

非組件或頁面的獨立的文件，請使用燒烤串命名（中劃線分割）

同一個特性的組件可以不另設 components 文件夾

src/
├── common/
│   ├── components/
│   │   ├── MyHeader.tsx
│   │   └── MyFooter.tsx
│   ├── utils/
│   │   └── get-random-number.util.ts
│   ├── hooks/
│   │   └── use-theme.hook.ts
│   └── constants.ts
├── Home/
│   └── Home.tsx
├── Widget/
│   ├── Tool.tsx
│   ├── Option.tsx
│   ├── Widget.helpers.ts
│   ├── Widget.utils.ts
│   ├── Widget.constants.ts
│   ├── Widget.tsx
│   └── index.ts
└── About/
    └── About.tsx

參考文章：Delightful React File/Directory Structure

燒烤串命名

這個實際上是參考瞭Angular規范，如果你對上面這個規范的大小寫命名強迫癥，不妨試試這個更嚴苛的規范。

  • 所有文件名、文件夾名都小寫，使用燒烤串命名（中劃線分割）。
  • 所有的文件都需要添加類型後綴。
  • 隻有主要的頁面組件可以放在特性文件夾底層，其餘文件都需要在特性文件夾中再設置類型文件夾。
  • 每個函數都應該是一個文件，不要把相同功能的函數放在一個文件內。
  • 移除 index.ts 導出，因為文件名變長且有類型後綴，引入方便判斷類型
src/
├── common/
│   ├── components/
│   │   ├── my-header.component.tsx
│   │   └── my-footer.component.tsx
│   ├── utils/
│   │   └── get-random-number.util.ts
│   ├── hooks/
│   │   └── use-theme.hook.ts
│   └── constants.ts
├── home/
│   └── home.page.tsx
├── widget/
│   ├── components/
│   │   ├── tool.component.tsx
│   │   └── option.component.tsx
│   ├── helpers/
│   │   └── set-option-storage.helper.ts
│   └── widget.page.tsx
└── about/
    └── about.page.tsx

示例項目

到此這篇關於幾種React文件名和目錄規范最佳實踐的文章就介紹到這瞭,更多相關React文件名和目錄實踐內容請搜索LevelAH以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持LevelAH！

推薦閱讀：