React在使用時(shí)非常靈活，如果沒(méi)有一個(gè)規(guī)范約束項(xiàng)目，在開(kāi)發(fā)過(guò)程中會(huì)非常混亂，本文將介紹幾個(gè)優(yōu)秀的規(guī)范。

文件類型

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

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

處理index文件

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

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

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

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

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

雖然把一個(gè)文件變成了兩個(gè)文件，但是有效地減少了開(kāi)發(fā)時(shí)的心智負(fù)擔(dān)。

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

規(guī)范

類型文件夾

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

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

如果你有路由，那么此時(shí)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

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

示例項(xiàng)目：Ant Design Pro

特性文件夾

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

大駝峰命名

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

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

非組件或頁(yè)面的獨(dú)立的文件，請(qǐng)使用燒烤串命名（中劃線分割）

同一個(gè)特性的組件可以不另設(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

燒烤串命名

這個(gè)實(shí)際上是參考了Angular規(guī)范，如果你對(duì)上面這個(gè)規(guī)范的大小寫命名強(qiáng)迫癥，不妨試試這個(gè)更嚴(yán)苛的規(guī)范。

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

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

示例項(xiàng)目

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

最新評(píng)論