• 展示組件（也可以叫做Dumb定義：只會(huì)接收props并根據(jù)props確定渲染結(jié)果的組件

  • 特點(diǎn)：復(fù)用性極高

  • 劃分原則：我們開(kāi)發(fā)一個(gè)控件，首先確定會(huì)不會(huì)被復(fù)用，只要被復(fù)用就要開(kāi)發(fā)成展示組件
    若果存在Dumb的子組件，那一定是Dumb組件
    所有Dumb都會(huì)放在components目錄下

  • 為什么這么劃分：對(duì)于Dumb來(lái)說(shuō)依賴的東西越少越好
    依賴的越少?gòu)?fù)用性越高

• 容器組件（也可以叫做）定義：專門(mén)用來(lái)做數(shù)據(jù)相關(guān)的應(yīng)用邏輯，拉取數(shù)據(jù)，把Dumb關(guān)聯(lián)起來(lái)，通過(guò)props傳遞給Dumb

  • 特點(diǎn)：處理業(yè)務(wù)數(shù)據(jù)邏輯，調(diào)度子組件

  • 劃分原則：容器組件我理解是倒推出來(lái)的，比如“在某個(gè)業(yè)務(wù)場(chǎng)景中你需要把幾個(gè)容展示組件拼湊起來(lái)，并且需要一個(gè)調(diào)度管理這幾個(gè)展示組件的角色，那么你需要一個(gè)容器組件
    ‘基本’不存在復(fù)用，需要和redux做連接connect，有處理異步數(shù)據(jù)操作的組件
    所有smart都會(huì)放在container目錄下

  • 為什么這樣劃分：smart不用考慮太多復(fù)用性的問(wèn)題，他們用是用來(lái)執(zhí)行特定業(yè)務(wù)邏輯的
    smart組件通常都有子組件，可為smart或Dumb

• 函數(shù)式無(wú)狀態(tài)組件（stateless function）0.14后推出的一種組件編寫(xiě)方式

  • 無(wú)狀態(tài)組件和純函數(shù)的結(jié)合

    • 無(wú)狀態(tài)組件：內(nèi)部沒(méi)有state，輸出只取決于props, context
    • 純函數(shù)：相同的輸入，輸出永遠(yuǎn)相同，沒(méi)有可觀察的任何副作用(不會(huì)更改傳入值)

  • 接收props, context

const PropTypes = require('prop-types');

const Button = ({children}, context) =>
  <button style={{background: context.color}}>
    {children}
  </button>;

Button.contextTypes = {color: PropTypes.string};

• 為什么要用

  • 語(yǔ)法簡(jiǎn)潔性（fb推薦理由）
  • 占內(nèi)小
  • 首次render性能更好
  • 可擴(kuò)展性強(qiáng)（可以進(jìn)行函數(shù)的compose，currying改造）

• 缺點(diǎn)：

  • 無(wú)生命周期（不能在shouldComponentUpdate進(jìn)行淺對(duì)比優(yōu)化渲染）
  • 沒(méi)有this