React在使用時非常靈活，如果沒有一個規(guī)范約束項目，在開發(fā)過程中會非?；靵y，本文將介紹幾個優(yōu)秀的規(guī)范。

文件類型

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

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

處理index文件

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

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

我的解決方案是，你的主組件應(yīng)該和原來一樣導(dǎo)出，index.ts 文件二次導(dǎo)出主組件。

你的 index.ts 應(yīng)該這樣寫：

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

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

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

規(guī)范

類型文件夾

這應(yīng)該是一個比較官方的規(guī)范，很多項目都在使用。

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

如果你有路由，那么此時component中的組件應(yīng)為通用組件。

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

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

示例項目：Ant Design Pro

特性文件夾

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

大駝峰命名

這種命名規(guī)范中，除了組件和頁面以外，所有的文件都需要添加類型后綴。
并且在一個特性中，可以將類型相同的函數(shù)放在一個文件內(nèi)。
例如 Widget.helper.ts Widget.util.ts

如果是通用的或復(fù)用的代碼，都建議放到 common 文件夾統(tǒng)一管理，其余特性文件夾均大寫。

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

同一個特性的組件可以不另設(shè) 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規(guī)范，如果你對上面這個規(guī)范的大小寫命名強迫癥，不妨試試這個更嚴苛的規(guī)范。

• 所有文件名、文件夾名都小寫，使用燒烤串命名（中劃線分割）。
• 所有的文件都需要添加類型后綴。
• 只有主要的頁面組件可以放在特性文件夾底層，其余文件都需要在特性文件夾中再設(shè)置類型文件夾。
• 每個函數(shù)都應(yīng)該是一個文件，不要把相同功能的函數(shù)放在一個文件內(nèi)。
• 移除 index.ts 導(dǎo)出，因為文件名變長且有類型后綴，引入方便判斷類型

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

示例項目

到此這篇關(guān)于幾種React文件名和目錄規(guī)范最佳實踐的文章就介紹到這了,更多相關(guān)React文件名和目錄實踐內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論