- 展示組件（也可以叫做Dumb定義：只會接收props并根據(jù)props確定渲染結(jié)果的組件
特點：復(fù)用性極高
劃分原則：我們開發(fā)一個控件哩陕，首先確定會不會被復(fù)用，只要被復(fù)用就要開發(fā)成展示組件
若果存在Dumb的子組件，那一定是Dumb組件
所有Dumb都會放在components目錄下為什么這么劃分：對于Dumb來說依賴的東西越少越好
依賴的越少復(fù)用性越高
-
容器組件（也可以叫做）定義：專門用來做數(shù)據(jù)相關(guān)的應(yīng)用邏輯悍及，拉取數(shù)據(jù)闽瓢，把Dumb關(guān)聯(lián)起來，通過props傳遞給Dumb
特點：處理業(yè)務(wù)數(shù)據(jù)邏輯心赶，調(diào)度子組件
劃分原則：容器組件我理解是倒推出來的扣讼，比如“在某個業(yè)務(wù)場景中你需要把幾個容展示組件拼湊起來，并且需要一個調(diào)度管理這幾個展示組件的角色缨叫，那么你需要一個容器組件
‘基本’不存在復(fù)用椭符，需要和redux做連接connect，有處理異步數(shù)據(jù)操作的組件
所有smart都會放在container目錄下為什么這樣劃分：smart不用考慮太多復(fù)用性的問題耻姥，他們用是用來執(zhí)行特定業(yè)務(wù)邏輯的
smart組件通常都有子組件销钝，可為smart或Dumb
- 函數(shù)式無狀態(tài)組件（stateless function）0.14后推出的一種組件編寫方式
-
無狀態(tài)組件和純函數(shù)的結(jié)合
- 無狀態(tài)組件：內(nèi)部沒有state，輸出只取決于props, context
- 純函數(shù)：相同的輸入琐簇，輸出永遠相同蒸健，沒有可觀察的任何副作用(不會更改傳入值)
接收props, context
-
const PropTypes = require('prop-types');
const Button = ({children}, context) =>
<button style={{background: context.color}}>
{children}
</button>;
Button.contextTypes = {color: PropTypes.string};
-
為什么要用
- 語法簡潔性（fb推薦理由）
- 占內(nèi)小
- 首次render性能更好
- 可擴展性強（可以進行函數(shù)的compose，currying改造）
-
缺點：
- 無生命周期（不能在shouldComponentUpdate進行淺對比優(yōu)化渲染）
- 沒有this
