如何設計React組件？

React代碼其實就是組件的集合，自然，要想處理好一個項目代碼，組件設計顯得尤其重要。

React組件設計堅持一項重要原則，那就是復用。如何讓我們寫的組件實現復用，這就是我們今天要寫的內容。

組件設計有其通用原則，總體可將組件分成兩類，容器組件和UI組件。

容器組件專註於兩件事：

1、管理data和state

2、用於邏輯測試

UI組件也專註於兩件事：

1、UI展示

2、可復用的模塊

下面，我舉個例子來具體看一下這兩類組件的大概用法。

如上圖所示，TodoContainer就是一個容器組件，可以看到數據狀態值在componentDidMount函數中被設置，這個組件用來處理各種業務邏輯，處理數據狀態的變化。最終通過setState使整個組件重新render一遍，這個render的工作全部交給UI組件來做。Todo就是一個UI組件，只負責UI的展示（將數據傳進來之後，每次輸出的邏輯都一致），UI組件輸出的結構在設定的需求中可以很好的得到復用。也可以理解為容器組件和UI組件將邏輯與結構進行了分離。簡略理解組件使用的模型是這樣的：

接下來說說兩種及其重要的組件，靜態組件和高階組件。

一、靜態組件（也叫無狀態組件）

下面我通過一個UI組件來說明為什麼提倡使用這類組件。

如果你寫過React組件，那你一定像下面這樣處理過UI：

這種方式官方稱為「反模式」。這種設計風格會導致狀態保存在renderItem中，每次調用render會創建一個新的renderItem實例，這是一種不好的設計方式。下面看一下我改進的一種處理方式：

如上所示，函數TodoItem就是一個無狀態組件（也可以認為就是一個函數），這種組件沒有狀態，沒有生命周期，只是簡單的接受props渲染成DOM結構。由於React在渲染時省掉了"組件類」實例化的過程，因此開銷非常低。

（當然，一般都會將靜態組件單獨成一個文件，便於復用和維護）

二、高階組件（也叫高級函數）

高階組件是React中一個很重要的且較複雜的概念。要想提高代碼質量，必須用好高級組件。那什麼是高階組件呢？

假如一個組件接收React組件作為參數，並且返回一個新的React組件，那麼我們稱這個組件為高階組件，需要注意的是高階組件本質上也是一個函數，並不是一個組件。為什麼我要強調這句話呢？因為你會發現高階組件很像父組件，但父組件是一個組件，高階組件是一個函數，函數關注的是邏輯，而組件可以關注是的UI等。

再次說明，不管是靜態組件還是高階組件，目的都是讓代碼高度可復用。

下面我列舉一個簡單的實例來說明一下使用。

假如我有一個組件，需要從LocalStorage中獲取數據，然後渲染出來，當一個組件，寫一次獲取的代碼就行了，但如果我在其它的組件里也需要從LocalStorage獲取數據的時候，當每個組件都去複製這段代碼就是顯得很冗餘。為了解決這類問題，我們可以定義一個高階組件，把需要獲取數據的組件當成參數傳給它。如下圖代碼所示：

withPerData就是一個高階組件，而MyComponent2就是需要獲取數據的組件。

另說明：高階組件的參數並非只能是一個組件，它還可以接收其他參數。

總結：

React代碼其實就是組件的集合，自然，要想處理好一個項目代碼，組件設計顯得尤其重要。充分發揮靜態組件和高階組件的優勢才會使項目代碼更具有可讀性。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！