React文件名和目錄規范實例分析

這篇文章主要講解了“React文件名和目錄規范實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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

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

特性文件夾

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

大駝峰命名

這種命名規范中，除了組件和頁面以外，所有的文件都需要添加類型后綴。
并且在一個特性中，可以將類型相同的函數放在一個文件內。
例如 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

燒烤串命名

這個實際上是參考了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文件名和目錄規范實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！