合理設計React元件，讓程式碼更美觀！ ！

react的目的是將前端頁面元件化，並用狀態機的思考模式去控制元件。元件和元件之間肯定是有關係得，透過合理得元件設計，給每一個元件劃定適合得邊界，可以有效降低當我們對頁面進行重構時對其他元件之間得影響。同時也可以讓我們得程式碼更加美觀。

1、高耦合低內聚。

高耦合：將功能聯繫緊密得部分放到一個容器元件內對外暴漏出index.js，目錄結構如下:

├── components
│   └── App
└── index.js

低內聚：當這個元件在呼叫頁面直接刪除時，不會觸發任何影響；減少無必要的重複渲染；減少重複渲染時影響得範圍。

2、展示元件與容器元件

展示元件	容器元件
專注於事物的展示	專注於事物如何運作
#可能包含展示和容器元件，並且一般會有DOM標籤和css樣式	可能包含展示和容器元件，且不會有DOM標籤和css樣式
#常常允許透過this.props.children傳遞	提供資料和行為給容器元件或展示元件
對第三方沒有任何依賴，例如store 或flux action	呼叫flux action 並且提供他們的回調給展示元件
不要指定資料如何載入和變化	作為資料來源，通常採用較高階的元件，而不是自己寫，例如React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
很少有自己的狀態，即使有，也是自己的UI狀態

#

這裡重點說下this.props.children。透過this.props.children我們很容易讓我們得組件變的低內聚。在實際開發中往往會遇到用純元件寫得展示元件下還有要繼續跟跟資料打交道得容器元件。這裡就用this.props.children套上這些容器元件就可以了。然後被套得容器元件可以繼續依照上面得規則新建個資料夾暴漏出index.js這種寫法。
這種寫法得最大好處是你很快就能找到你寫得這個元件是在哪，是乾嘛得，影響了哪。

3、從頂部向下得單向資料流

當我們得設計滿足上面這些條件時，使用從頂部向下的單向資料流會讓我們在使用一些類似於redux這種得狀態管理工具時，影響的範圍更加可控，再透過shouldComponentUpdate來減少不必要的渲染。 （不過這麼寫確實挺麻煩的，但是react從v16.3開始使用新的生命週期函數getDerivedStateFromProps來強制開發者對這一步進行優化）

4、受控組件和非受控組件

有許多的web元件可以被使用者的互動發生改變，例如：，。這些元件可以透過輸入一些內容或設定元素的value屬性來改變元件的值。但是，因為React是單向資料流綁定的，這些元件可能會變得失控：
1.一個維護它自己state裡的value值的元件無法從外部修改
2 .一個透過props來設定value值的元件只能透過外部控制來更新。

受控元件：

一個受控的應該有一個value屬性。渲染一個受控的元件會展示value屬性的值。
一個受控的元件不會維護它自己內部的狀態，元件的渲染單純的依賴props。也就是說，如果我們有一個透過props來設定value的元件，不管你如何輸入，它只會顯示props.value。換句話說，你的組件是唯讀的。
在處理一個受控元件的時候，應該始終傳一個value屬性進去，並且註冊一個onChange的回呼函數讓元件變得可變。

非受控元件：

一個沒有value屬性的就是一個非受控元件。透過渲染的元素，任意的使用者輸入都會被立即反映出來。非受控的只能透過OnChange函數來向上層通知自己被使用者輸入的變更。

# 混合元件：

同時維護props.value和state.value的值。 props.value在展示上有較高的優先權，state.value代表著元件真正的值。

5、使用高階元件（HOC）

簡單定義：一個接收react元件作為參數傳回另一個元件的函數。
可以做什麼：程式碼復用，程式碼模組化增刪改props

使用案例：比方說公司突然要給前端程式碼不同的點擊埋點，就可以使用hoc包一層，再不改動原來各處程式碼得同時進行了合理得改動。

6、增刪改查標準流程

增:填寫數據，驗證數據，插入數據，重新查詢數據列表。
刪:確認刪除，重新查詢資料清單。
查:查詢數據列表，分頁顯示

改:填寫數據，驗證數據，修改數據，重新查詢數據列表

其實設計組件時沒必要過早的組件化。我們可以先快速的寫出一個版本，然後再根據實際設計拆分以應對專案初期的需求快速變更。然後一點一點的按照設計模式去改變我們的項目，只要設計模式合理地拆分其實是一件很流暢、很自然的事情。

更多程式相關知識，請造訪：程式設計影片

！ ！ ###

以上是合理設計React元件，讓程式碼更美觀！ ！的詳細內容。更多資訊請關注PHP中文網其他相關文章！