Presentational and Container Components（譯文）

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

當(dāng)作者在編寫React程序時，發(fā)現(xiàn)了一個簡單卻十分有用的模式。如果你已經(jīng)使用react一段時間了，有可能你已經(jīng)發(fā)現(xiàn)它了

這篇文章

很好的解釋了它，這篇文章會補(bǔ)充一些觀點(diǎn)。

?

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

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

?

作者的展示組件

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

作者的容器組件

• 關(guān)心事物如何運(yùn)行
• 可能同時包含展示組建和容器組件，但是通常沒有任何DOM標(biāo)簽（除了一些最外層DIV標(biāo)簽），也不會有任何樣式代碼
• 提供數(shù)據(jù)和行為給展示組件或者其他的容器組件
• 調(diào)用FLUX action 并且提供這些作為回調(diào)給展示組件
• 通常是有狀態(tài)的，因?yàn)樗麄兺ǔＷ鳛閿?shù)據(jù)源
• 一般使用高級組件生生，就像React Redux的connect（），elay的createContainer（），Flux Utils的Container.create（），而不是手寫
• 舉例：?UserPage, FollowersSidebar, StoryContainer, FollowedUserList

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

這樣做的好處

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

  ?

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

?

利用這一點(diǎn)

什么時候引進(jìn)容器組件

作者建議，剛開始構(gòu)建你的app時只需要展示組件，最后你會發(fā)現(xiàn)，你需要傳遞太多的props在中間組件上

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

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

和行為props到子組件上而不必負(fù)擔(dān)書中間無關(guān)的組件。

?

這是一個持續(xù)進(jìn)行的重構(gòu)過程，所以不要期望在最開始的時候就把它做正確，當(dāng)你實(shí)驗(yàn)這個模式的時候，

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

Other Dichotomies

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

相比之下，有一些相關(guān)的（但不同的）技術(shù)區(qū)別：

• 有無state

一些組件使用setState，一些組件不使用。當(dāng)容器組件往往是有狀態(tài)的，展示組件往往是沒有狀態(tài)的，但這不是一個硬性規(guī)則。

• 函數(shù)式和類式

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

• 純凈的和非純凈的

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

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

所以他們渲染的性能可以通過shouldComponentUPdate（）的鉤子里的淺比較進(jìn)行優(yōu)化。

?

轉(zhuǎn)載于:https://www.cnblogs.com/NerverLate/p/8744745.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。