react的目的是將前端頁面元件化，並用狀態機的思考模式去控制元件。元件和元件之間肯定是有關係得，透過合理得元件設計，給每一個元件劃定適合得邊界，可以有效降低當我們對頁面進行重構時對其他元件之間得影響。同時也可以讓我們得程式碼更加美觀。
高耦合：將功能聯繫緊密得部分放到一個容器元件內對外暴漏出index.js，目錄結構如下:
├── components │ └── App └── index.js
低內聚：當這個元件在呼叫頁面直接刪除時，不會觸發任何影響；減少無必要的重複渲染；減少重複渲染時影響得範圍。
| 展示元件 | 容器元件 |
|---|---|
| 專注於事物的展示 | 專注於事物如何運作 |
| #可能包含展示和容器元件，並且一般會有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這種寫法。
這種寫法得最大好處是你很快就能找到你寫得這個元件是在哪，是乾嘛得，影響了哪。
當我們得設計滿足上面這些條件時，使用從頂部向下的單向資料流會讓我們在使用一些類似於redux這種得狀態管理工具時，影響的範圍更加可控，再透過shouldComponentUpdate來減少不必要的渲染。 （不過這麼寫確實挺麻煩的，但是react從v16.3開始使用新的生命週期函數getDerivedStateFromProps來強制開發者對這一步進行優化）
有許多的web元件可以被使用者的互動發生改變，例如：，
一個受控的應該有一個value屬性。渲染一個受控的元件會展示value屬性的值。
一個受控的元件不會維護它自己內部的狀態，元件的渲染單純的依賴props。也就是說，如果我們有一個透過props來設定value的元件，不管你如何輸入，它只會顯示props.value。換句話說，你的組件是唯讀的。
在處理一個受控元件的時候，應該始終傳一個value屬性進去，並且註冊一個onChange的回呼函數讓元件變得可變。
一個沒有value屬性的就是一個非受控元件。透過渲染的元素，任意的使用者輸入都會被立即反映出來。非受控的只能透過OnChange函數來向上層通知自己被使用者輸入的變更。
# 混合元件：
簡單定義：一個接收react元件作為參數傳回另一個元件的函數。
可以做什麼：程式碼復用，程式碼模組化增刪改props
增:填寫數據，驗證數據，插入數據，重新查詢數據列表。
刪:確認刪除，重新查詢資料清單。
查:查詢數據列表，分頁顯示
更多程式相關知識，請造訪：程式設計影片
！ ！ ###以上是合理設計React元件，讓程式碼更美觀！ ！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
