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
這個規范在小項目中尚可實行。但是如果相對復雜的項目,由於文件夾層數多,會導致引入混亂。接下來會推薦特性分類的規范。
示例項目: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!
推薦閱讀:
- ahooks整體架構及React工具庫源碼解讀
- 進入Hooks時代寫出高質量react及vue組件詳解
- vue3的hooks用法總結
- 詳解React Hooks是如何工作的
- React-Router6版本的更新引起的路由用法變化