(翻譯)Presentational and Container Components

這是篇文章翻譯自medium的：Presentational and Container Components

譯者語：
這篇文章是緊接着對我上一篇翻譯的擴充，對Container Component模式描述的更加細，解決了我不少開發中的困惑。

Presentational and Container Components

在我寫React程序的時候，我發現一個模式很是的好用。對React有必定經驗的人，確定已經對這個模式有過了解。這篇文章已經作了很好的介紹，可是在這裏我想要再補充幾點。
當你把你的組件分紅兩種不一樣的類型，你會發現他們會很是容易複用和理解。這兩種類型，我稱爲Container and Presentational components(譯者：可翻譯爲容器和展現組件，由於社區中常以英文名字出現，因此不翻譯)。固然，我也聽過Fat and Skinny, Smart and Dumb, Stateful and Pure, Screens and Components等等，這些東西雖然不徹底相同，可是他們的中心思想是同樣的。

Presentational components:

• 關注於該怎樣展示

• 中間或許會包含presentational和container組件，同時也能夠包含本身的一些JSX代碼和樣式代碼

• 容許經過this.props.children來傳遞內容

• 不和app的其餘地方產生依賴關係，好比沒有Flux的actions、stores

• 不關注數據是怎麼加載和處理的

• 只經過props來獲取數據和回掉函數

• 通常沒有本身的state(即便有，也只是UI狀態，而不是數據)

• 除非組件須要state，生命週期或者性能優化，可使用functional components的方式進行聲明

• 舉個栗子：Page, Sidebar, Story, UserInfo, List

Container components:

• 關注與該怎麼運行

• 中間能夠包含presentational和container組件，除非包裹用的div的一些樣式，通常不會含有任何樣式

• 向包含的presentational和其餘的container components傳遞數據和行爲方法

• 調用Flux的actions或者把這些actions做爲回掉函數傳給presentational components

• 因爲他們常常做爲數據來源的角色，因此container通常會包含state

• 通常會由更高等級的components來生成，好比React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()

• 舉個栗子：UserPage, FollowersSidebar, StoryContainer, FollowedUserList

一般，我會把它們放到不一樣的文件夾下面，以便區分。

這麼作的好處

• 職責分離。這樣你會更容易理解你的app和UI。

• 更易複用。同一個presentational component，也能夠被用在不一樣的數據源下。

• presentational component能夠做爲一個「調色板」。你能夠把它放在一個頁面上，讓設計師在不須要知道app邏輯的狀況下，隨意改變相關變量。

• 這樣作能夠強迫你寫一些「佈局組件」，好比Sidebar, Page, ContextMenu，而後經過this.props.children來傳遞內容，而不是在不一樣的container中寫一大堆相同的代碼。

爲何要使用Containers

我首先建議你先不使用這個模式來搭建你的app，最後發現你會傳遞太多的props給中間組件。對於不少中間組件來講，他們並不須要這些props，可是他們還必須傳遞給下一級組件。同時，若是下級組件須要增長一個數據，那麼你就須要一路修改到最上面。這個時候，就是你須要引入Container and Presentational component的時候。這樣子根組件就能夠得到須要的數據和行爲方法，而不會去修改那些沒有關係的中間組件。
不要指望你剛開始就能把兩種組件作出正確的區分。當你得到更多的經驗，你就會知道該何時用container何時用presentational組件，就像你知道何時要聲明一個function同樣。這個免費的教程能夠幫助你。

一些詞彙

你須要明白，container和presentational components的不一樣並非技術上的不一樣，而是目的上的不一樣。

做爲對比，這裏列出一些詞彙：

• Stateful and Stateless 有一些組件使用React.setState()方法，有些不須要用。Container更傾向於Stateful，而Presentational更傾向於Stateless，固然這並非絕對的。Presentational可使Stateless，Container也能夠是Stateful

• Classes and Functions 一個組件能夠經過class和function進行聲明。Functional components更簡潔一些，他們缺乏不少class含有的功能。這些或許之後會有改變，可是如今確實存在。因爲functional components比較容易理解，因此我建議你使用functional components, 除非你須要state, 生命週期和性能優化這些只有class開放的功能.

• Pure and Impure若是相同的props和state，會返回相同的結果，那麼這個component就是pure的。Pure組件能夠用class或function來聲明，他也能夠是stateful的，也能夠是stateless的。另一個重要的區別是，pure組件並不依賴於深層的props和state，因此他們能夠經過在shouldComponentUpdate()中淺層對比來進行優化。如今這個方法只在class中存在，或許之後會加入到function中。

Presentational和Container組件均可以是任意的一種狀態。根據個人經驗，presentational組件傾向於stateles pure functions, 而container更傾向於stateful pure classes。固然這只是基於觀察得出的結果，我也曾經看到過徹底不一樣的狀況。
記住，不要把presentational和container區分的那麼明顯。有的時候很難去畫出一個分界線來。若是你不肯定一個組件應該是presentational仍是container，那麼或許還太早去區分它。

結束語

在早期的文章中，我說presentaional container只能包含presentational components。如今我並不這麼認爲。

---

這是篇文章翻譯自medium的：Presentational and Container Components