［譯］Smart and Dumb Components

Smart and Dumb Components

原文地址

當我在寫React應用的時候我發現一種老有用並且簡單的寫法了。要是你寫了一段時間React的話。。我估摸着你也應該發現了這種寫法了。這篇文章（下次我就翻譯這片文章）就說的很好，可是捏，我還想多差兩句嘴

你要是把你的組件分紅兩大類。。你將會發現，這樣的話你更容易思考你的組件該怎麼寫。。而你的組件寫出來也更容易複用。我把這兩大類稱做 Smart和 Dumb，可是我也據說他們被稱爲Fat 和 Skinny, Stateful 和 Pure, Screens 和 Components等。雖然叫法不一樣，但核心思想都差很少

Dumb components:

-它必須能獨立運做。。不能依賴依賴這個app的actions 或者 stores 部分

• 能夠容許有this.props.children,這樣的話有助於這個組件有修改彈性

• 接受數據和數據的改變只能經過props來處理,沒必要也不能用state。

• 組件的外觀能用一個css來維護(這樣才更容易重用，相似支付寶的ant)

• 不多用到state,(通常呈現動畫的時候可能會用到。。好比控制下拉框的展開或者收起)

• 也許會用到其餘的dumb components

• 好比說: Page, Sidebar, Story, UserInfo, List,像這些都是dumb components.

smart components:

• 必定包含至少一個Smart 或者 Dumb的元件，（這確定啊。。否則他乾的啥）

• 負責把從flux(or redux等)接收到的state傳給dumb component

• 負責call action,並把它的callback傳給dumb component

• 它應該只有結構沒有外觀（這樣的話。。改個樣式只須要改dumb 組件 就行了。。他寫着。。他寫那裏 否則很累啊）

• 好比說: UserPage, FollowersSidebar, StoryContainer,
  FollowedUserList.

這樣作的好處

• 有助理你分離關注點，這樣的話更有助於理解你的app的業務邏輯 和 它的ui

• 更有助於複用你的dumb組件，你能夠將你的dumb組件複用於別的state下，並且這兩個state還徹底不一樣

• 本質上dumb 組件 其實 就是你的app的調色版。。你能夠將它們放到一個頁面上。。而後讓設計師除了app的業務邏輯，樣式隨便怎麼改，