如何架構一個 React 項目？

標籤：

編程有點像搞園藝。比起竭力去對付BUG（蟲子），我們更願意把一切弄得整潔有序，以免最後落得個身在荒野叢林中。低劣的架構會拖我們的後腿，也會使得BUG更容易鑽進系統裡去。

想要對你的項目進行架構，方法有多種。我相信，根據你的實際情況對架構進行演化，要遠比堅持一些條條框框的教條更好。接下來我將會介紹一些基礎的方法以資您思考。

 

將所有的東西都放在一個檔案中

最簡單的項目可以被放到一個檔案之中。而這就是我所選擇的用來處理我的Webpack 配置的方法。這種方法最大的好處就是所有你需要的東西都在這一個檔案中了。如果你是從上到下對你的代碼進行組織的，那麼這就會是一個合適的做法。

你可以用類似的方式開始一個React項目的工作。當你在進行原型設計時，想要去試圖弄明白階層，就可以在一個檔案中把組件都梳理出來。而這樣會隨著檔案的慢慢增大而變得笨重起來。例如對測試的處理就會比原先要困難一些。檔案分支的合并也將會是個問題。

拆分成多個檔案

解決這個問題顯而易見的方式就是著手將一些東西進行拆分。開始的時候你可以把各個組件挪到各自分開的檔案中去，像這樣：

這裡 index.jsx 可以作為應用程式的入口。它使用了 ReactDOM.render 來渲染 App ，並且讓這部分啟動起來。App 再來使用 Note 做一些有趣的事情。如果我還想要有另外的一個組件，只需簡單地在 /components 下面添加就是了。

如果你想要對你的組件進行測試，可以增加一個用於測試的單獨的目錄，並在那裡面進行測試代碼的開發。甚至你還可以嘗試一下測試驅動開發的方法，在實現之前就全盤考慮好組件的約束條件。

使用這個基礎的架構你可以走得相當的遠。儘管它也有它的局限性。例如，如何處理樣式？主樣式檔案 main.css 可能會變得相當的大。其前景是有點可怕的。

將組件放到它們自己的目錄下

前面一節最後的那個問題可以通過在系統中增加更多的架構來解決。下面就是你最終會看到的樣子：

① 組件的名稱（例如，App.jsx）以一個大寫的字母開頭能讓它們更加容易被找到。 Index.js 檔案為我們提供了通向這些檔案的整潔的入口，我們因此可以很容易的在別的地方對它們行使用。

② 現在每一個組件都是各自獨立的一個實體了。我們使用諸如CSS Modules這樣的樣本就可以說明這一點。將這些組件從項目中抽取出來，讓現在可以很容易使它們各自進行獨立的管理。

③ 現在與每個組件相關的測試可以不費吹灰之力就能找到。我們也可以仍然在項目根目錄下擁有一個 /tests 目錄，以用來處理更進階別的測試。

當然真實的項目複雜度會更高，而當前的這種架構將開始突破複雜度的限制。不知道這適不適合你的想法呢？

將視圖添加到架構的組合中

這裡可能就是各種意見開始出現分歧的地方。我會讓你在評論中比較各自觀點的高下。這裡是一種我感覺上挺舒服的架構：

因為我們現在已經有了路由，所以 App 就變得多餘了。現在更像是視圖在負責其職責。 它們只是在遵循著我們的路由規則，並基於它們各自的需求使用著組件。

這種架構遠還可以進一步擴大，不過即使是它，隨著項目的增長也會受到限制。我建議在視圖和組件之間增加一個像“功能特性”這樣的概念。功能特性就是以某種方法和形式對組件進行聚集，當然功能特性本身也是可以聚集的。

處理資料問題

鑒於大多數實用的應用程式都得對資料進行不同程度的處理，我們目前的架構所做的可能還不太夠。這在很大程度上取決於你選擇了什麼樣類型的架構。將一些資料問題放到當前的架構中處理或許還是可以的。或者你可能會引入新的根層級的目錄，比如 /actions、 /constants、 /libs、 /reducers、 /stores，這裡只是給你提供一些思路。

總結

對你的項目進行架構並沒有一個什麼正確的方法。相反，你應該保持務實。有時候只是對項目進行一下重組就可以協助你使其更加清晰，並且使其更容易讓你自己和其他人理解。對於你在你的 React 項目選擇了什麼類型的架構，以及為什麼做這樣的選擇，我是非常好奇的。所以請就此隨意地在底下發表評論。

為了讓深入瞭解 React 的世界更加容易，我們準備了一個特別的包，其中有一些來自獨立開發人員的材料。它在限定的時間內是可以使用的。如果你想要深化自己對於 React 的瞭解，現在就是一個上手它的好時機。我希望你會喜歡其中包含的書籍、視頻和諮詢服務。

前面一節最後的那個問題可以通過在系統中增加更多的架構來解決。下面就是你最終會看到的樣子：

原文連結：How to Structure a React Project?

Juho Veps?l?inen

譯者：傑微刊－Leo Xu

查看更多內容

 

掃描二維碼下載解放號APP，查看更多精彩內容，找到同道中人

如何架構一個 React 項目？