資訊專欄INFORMATION COLUMN
摘要：對(duì)于很多中間組件來說，他們并不需要這些，但是他們還必須傳遞給下一級(jí)組件。更傾向于，而更傾向于，當(dāng)然這并不是絕對(duì)的。這是篇文章翻譯自的
這是篇文章翻譯自medium的：Presentational and Container Components
譯者語(yǔ)：
這篇文章是緊接著對(duì)我上一篇翻譯的擴(kuò)充，對(duì)Container Component模式描述的更加細(xì)，解決了我很多開發(fā)中的困惑。
在我寫React程序的時(shí)候，我發(fā)現(xiàn)一個(gè)模式非常的好用。對(duì)React有一定經(jīng)驗(yàn)的人，肯定已經(jīng)對(duì)這個(gè)模式有過了解。這篇文章已經(jīng)做了很好的介紹，但是在這里我想要再補(bǔ)充幾點(diǎn)。
當(dāng)你把你的組件分成兩種不同的類型，你會(huì)發(fā)現(xiàn)他們會(huì)非常容易復(fù)用和理解。這兩種類型，我稱為Container and Presentational components(譯者：可翻譯為容器和展示組件，因?yàn)樯鐓^(qū)中常以英文名字出現(xiàn)，所以不翻譯)。當(dāng)然，我也聽過Fat and Skinny, Smart and Dumb, Stateful and Pure, Screens and Components等等，這些東西雖然不完全相同，但是他們的中心思想是一樣的。
Presentational components:
關(guān)注于該怎樣展現(xiàn)
中間或許會(huì)包含presentational和container組件，同時(shí)也可以包含自己的一些JSX代碼和樣式代碼
允許通過this.props.children來傳遞內(nèi)容
不和app的其他地方產(chǎn)生依賴關(guān)系，比如沒有Flux的actions、stores
不關(guān)注數(shù)據(jù)是怎么加載和處理的
只通過props來獲取數(shù)據(jù)和回掉函數(shù)
一般沒有自己的state(即使有，也只是UI狀態(tài)，而不是數(shù)據(jù))
除非組件需要state，生命周期或者性能優(yōu)化，可以使用functional components的方式進(jìn)行聲明
舉個(gè)栗子：Page, Sidebar, Story, UserInfo, List
Container components:
關(guān)注與該怎么運(yùn)行
中間可以包含presentational和container組件，除非包裹用的div的一些樣式，一般不會(huì)含有任何樣式
向包含的presentational和其他的container components傳遞數(shù)據(jù)和行為方法
調(diào)用Flux的actions或者把這些actions作為回掉函數(shù)傳給presentational components
由于他們經(jīng)常作為數(shù)據(jù)來源的角色，所以container一般會(huì)包含state
一般會(huì)由更高等級(jí)的components來生成，比如React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
舉個(gè)栗子：UserPage, FollowersSidebar, StoryContainer, FollowedUserList
通常，我會(huì)把它們放到不同的文件夾下面，以便區(qū)分。
這么做的好處職責(zé)分離。這樣你會(huì)更容易理解你的app和UI。
更易復(fù)用。同一個(gè)presentational component，也可以被用在不同的數(shù)據(jù)源下。
presentational component可以作為一個(gè)“調(diào)色板”。你可以把它放在一個(gè)頁(yè)面上，讓設(shè)計(jì)師在不需要知道app邏輯的情況下，隨意改變相關(guān)變量。
這樣做可以強(qiáng)迫你寫一些“布局組件”，比如Sidebar, Page, ContextMenu，然后通過this.props.children來傳遞內(nèi)容，而不是在不同的container中寫一大堆相同的代碼。
為什么要使用Containers我首先建議你先不使用這個(gè)模式來搭建你的app，最后發(fā)現(xiàn)你會(huì)傳遞太多的props給中間組件。對(duì)于很多中間組件來說，他們并不需要這些props，但是他們還必須傳遞給下一級(jí)組件。同時(shí)，如果下級(jí)組件需要增加一個(gè)數(shù)據(jù)，那么你就需要一路修改到最上面。這個(gè)時(shí)候，就是你需要引入Container and Presentational component的時(shí)候。這樣子根組件就可以獲得需要的數(shù)據(jù)和行為方法，而不會(huì)去修改那些沒有關(guān)系的中間組件。
不要期望你剛開始就能把兩種組件做出正確的區(qū)分。當(dāng)你獲得更多的經(jīng)驗(yàn)，你就會(huì)知道該什么時(shí)候用container什么時(shí)候用presentational組件，就像你知道什么時(shí)候要聲明一個(gè)function一樣。這個(gè)免費(fèi)的教程可以幫助你。
你需要明白，container和presentational components的不同并不是技術(shù)上的不同，而是目的上的不同。
作為對(duì)比，這里列出一些詞匯：
Stateful and Stateless 有一些組件使用React.setState()方法，有些不需要用。Container更傾向于Stateful，而Presentational更傾向于Stateless，當(dāng)然這并不是絕對(duì)的。Presentational可以使Stateless，Container也可以是Stateful
Classes and Functions 一個(gè)組件可以通過class和function進(jìn)行聲明。Functional components更簡(jiǎn)潔一些，他們?nèi)鄙俸芏郼lass含有的功能。這些或許以后會(huì)有改變，但是現(xiàn)在確實(shí)存在。由于functional components比較容易理解，所以我建議你使用functional components, 除非你需要state, 生命周期和性能優(yōu)化這些只有class開放的功能.
Pure and Impure如果相同的props和state，會(huì)返回相同的結(jié)果，那么這個(gè)component就是pure的。Pure組件可以用class或function來聲明，他也可以是stateful的，也可以是stateless的。另外一個(gè)重要的區(qū)別是，pure組件并不依賴于深層的props和state，所以他們可以通過在shouldComponentUpdate()中淺層對(duì)比來進(jìn)行優(yōu)化?，F(xiàn)在這個(gè)方法只在class中存在，或許以后會(huì)加入到function中。
Presentational和Container組件都可以是任意的一種狀態(tài)。根據(jù)我的經(jīng)驗(yàn)，presentational組件傾向于stateles pure functions, 而container更傾向于stateful pure classes。當(dāng)然這只是基于觀察得出的結(jié)果，我也曾經(jīng)看到過完全不同的情況。
記住，不要把presentational和container區(qū)分的那么明顯。有的時(shí)候很難去畫出一個(gè)分界線來。如果你不確定一個(gè)組件應(yīng)該是presentational還是container，那么或許還太早去區(qū)分它。
在早期的文章中，我說presentaional container只能包含presentational components。現(xiàn)在我并不這么認(rèn)為。
這是篇文章翻譯自medium的：Presentational and Container Components
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91668.html
摘要：同時(shí)減少了從數(shù)據(jù)源到葉子結(jié)點(diǎn)的層級(jí)，減少了中間層級(jí)的數(shù)量和不必要的重復(fù)渲染。模型這個(gè)名字是我自己編的，其實(shí)是對(duì)上面說的結(jié)構(gòu)的一個(gè)分離。當(dāng)然，像之前所說的地圖，天氣預(yù)報(bào)，按照邏輯他們也屬于，但是他們也獲取數(shù)據(jù)，處理數(shù)據(jù)。 之前翻譯了兩篇關(guān)于Container&Presentational Component模型的文章，一篇是基礎(chǔ)的Container和Component的定義，另外一篇是進(jìn)...
摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫(kù)。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。 前言 前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議： 如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架； 如果...
摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫(kù)。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。 前言 前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議： 如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架； 如果...
摘要：，谷歌給的一份性能指南和最佳實(shí)踐。目前而言，前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個(gè)是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
摘要：，谷歌給的一份性能指南和最佳實(shí)踐。目前而言，前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個(gè)是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
閱讀 2621·2021-09-28 09:35
閱讀 3268·2021-09-03 10:28
閱讀 2920·2019-08-30 15:43
閱讀 1484·2019-08-30 14:04
閱讀 1817·2019-08-29 17:02
閱讀 1821·2019-08-26 13:59
閱讀 702·2019-08-26 11:51
閱讀 3265·2019-08-23 17:16
