React組件設計規則

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組件能夠被用戶的交互發生改變，好比：<input>，<select>。這些組件能夠經過輸入一些內容或者設置元素的value屬性來改變組件的值。可是，由於React是單向數據流綁定的，這些組件可能會變得失控：
1.一個維護它本身state裏的value值的<Input>組件沒法從外部被修改
2.一個經過props來設置value值的<Input>組件只能經過外部控制來更新。

受控組件：

一個受控的<input>應該有一個value屬性。渲染一個受控的組件會展現出value屬性的值。
一個受控的組件不會維護它本身內部的狀態，組件的渲染單純的依賴於props。也就是說，若是咱們有一個經過props來設置value的<input>組件，無論你如何輸入，它都只會顯示props.value。換句話說，你的組件是隻讀的。
在處理一個受控組件的時候，應該始終傳一個value屬性進去，而且註冊一個onChange的回調函數讓組件變得可變。

非受控組件：

一個沒有value屬性的<input>就是一個非受控組件。經過渲染的元素，任意的用戶輸入都會被當即反映出來。非受控的<input>只能經過OnChange函數來向上層通知本身被用戶輸入的更改。
#### 混合組件：
同時維護props.value和state.value的值。props.value在展現上擁有更高的優先級，state.value表明着組件真正的值。

五、使用高階組件（HOC）

簡單定義：一個接收react組件做爲參數返回另一個組件的函數。
能夠作什麼：代碼複用，代碼模塊化增刪改props
使用案例：比方說公司忽然要給前端代碼不一樣的點擊埋點，就可使用hoc包一層，再不改動原來各處代碼得同時進行了合理得改動。

六、增刪改查標準流程

增:填寫數據，驗證數據，插入數據，從新查詢數據列表。
刪:確認刪除，從新查詢數據列表。
查:查詢數據列表，分頁顯示
改:填寫數據，驗證數據，修改數據，從新查詢數據列表

其實設計組件時不必過早的組件化。咱們能夠先快速的寫出一個版本，而後再根據實際設計拆分以應對項目初期的需求快速變動。而後一點一點的按照設計模式去改變咱們的項目，只要設計模式合理拆分實際上是一個很流暢和天然的事情。

推薦文章：
一、React技術棧進階之路之設計模式篇
二、React組件設計
三、react如何經過shouldComponentUpdate來減小重複渲染
四、reactJS 乾貨（reactjs 史上最詳細的解析乾貨）