Presentational and Container Components（譯文）

譯自（https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0）

當作者在編寫React程序時，發現了一個簡單卻十分有用的模式。如果你已經使用react一段時間了，有可能你已經發現它了

這篇文章

很好的解釋了它，這篇文章會補充一些觀點。

如果你將組件分割到兩個類別中你會發現你的組件很容易復用，作者把他們稱作容器組件和展示組件，作者也聽到過其他一些稱呼

胖子和瘦子，聰明和愚蠢，穩固和純凈，屏幕和組件…，這些名稱雖然不是一模一樣，但是核心想法是相似的。

作者的展示組件

• 關心事物展現的外觀
• 可能會包含展示組件和容器組件一起，通常它們各自擁有相同的DOM標簽和樣式
• 通常允許通過this.props.children 進行控制
• 對app其他部分沒有依賴，比如flux action 或stores
• 不指定數據如何加載或改變
• 只通過props接收數據和回掉
• 很少擁有自己的狀態（當擁有時，應該是UI的狀態而不是數據）
• 除非組件需要狀態，生命周期鉤子，或者性能優化時可以用functional component編寫
• 舉例 ：Page, Sidebar, Story, UserInfo, List.

作者的容器組件

• 關心事物如何運行
• 可能同時包含展示組建和容器組件，但是通常沒有任何DOM標簽（除了一些最外層DIV標簽），也不會有任何樣式代碼
• 提供數據和行為給展示組件或者其他的容器組件
• 調用FLUX action 並且提供這些作為回調給展示組件
• 通常是有狀態的，因為他們通常作為數據源
• 一般使用高級組件生生，就像React Redux的connect（），elay的createContainer（），Flux Utils的Container.create（），而不是手寫
• 舉例： UserPage, FollowersSidebar, StoryContainer, FollowedUserList

React Native 第六天