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

  通常，我將兩種組件放在不同的文件夾下，以便區分

這樣做的好處

• 更好的關注點分離。用這樣的方式寫自己的組件能更好理解app和ui
• 更好的復用性。你可以使用同一個展示組件卻是不同的狀態源，把這種方式變成兩個不同的容器組件，這樣可以進一步增強復用性
• 展示組件實際上是你app的調色板，你可以將它們放在單個頁面上，UI設計師可以隨意更改界面，而不必觸及app的邏輯部分
• 這會強制你提取布局組件，如側邊欄，頁面，上下文菜單，用this.props.children 代替，而不是在幾個容器組件中復制相同的標記和布局

  ?

NOTE：組件不必發出DOM，他們只需在UI關系之間提供組合邊界

?

利用這一點

什么時候引進容器組件

作者建議，剛開始構建你的app時只需要展示組件，最后你會發現，你需要傳遞太多的props在中間組件上

當你注意到一些組件不用它們接收到的props，但是向下傳遞接收到的props，這時你需要重寫這些中間組件

，任何時候子組件需要更多的數據就是一個好的時機來引入一些container組件，這種方式你可以放一些數據

和行為props到子組件上而不必負擔書中間無關的組件。

?

這是一個持續進行的重構過程，所以不要期望在最開始的時候就把它做正確，當你實驗這個模式的時候，

你將會對什么時候提取一些container組件建立一種直觀的感覺，就像你知道該什么時候提取方法一樣。

Other Dichotomies

理解container和represent 兩種組件的區別非常重要，兩種組件不是技術上的不同，而是目的上的不同。

相比之下，有一些相關的（但不同的）技術區別：

• 有無state

一些組件使用setState，一些組件不使用。當容器組件往往是有狀態的，展示組件往往是沒有狀態的，但這不是一個硬性規則。

• 函數式和類式

組建可以通過這兩種方式創建，作者建議你使用函數式組件，除非你需要state，生命周期鉤子，或者性能優化（此時你需要使用類組件）

• 純凈的和非純凈的

按例，如果一個組件保證傳入相同的props和state 就會返回相同的結果，那么它就是一個純凈的組件。

純凈組件以類或函數方式創建，有無state都可以，純凈組件的另一個重要方面是他們不依靠深層的props和state

所以他們渲染的性能可以通過shouldComponentUPdate（）的鉤子里的淺比較進行優化。

?

轉載于:https://www.cnblogs.com/NerverLate/p/8744745.html

總結

以上是生活随笔為你收集整理的React Native 第六天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。