国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

(翻譯)Presentational and Container Components

mushang / 1288人閱讀

摘要：對于很多中間組件來說，他們并不需要這些，但是他們還必須傳遞給下一級組件。更傾向于，而更傾向于，當然這并不是絕對的。這是篇文章翻譯自的

這是篇文章翻譯自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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91668.html

相關文章

  • 關于React的Container&Presentational Component模型結構

    摘要：同時減少了從數據源到葉子結點的層級，減少了中間層級的數量和不必要的重復渲染。模型這個名字是我自己編的，其實是對上面說的結構的一個分離。當然，像之前所說的地圖，天氣預報，按照邏輯他們也屬于，但是他們也獲取數據，處理數據。 之前翻譯了兩篇關于Container&Presentational Component模型的文章，一篇是基礎的Container和Component的定義，另外一篇是進...

    Berwin 評論0 收藏0

  • React項目實戰：環境搭建

    摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。 前言 前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議： 如果對Weex App感興趣，應該選擇vue框架； 如果...

    cnio 評論0 收藏0

  • React項目實戰：環境搭建

    摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。 前言 前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議： 如果對Weex App感興趣，應該選擇vue框架； 如果...

    GHOST_349178 評論0 收藏0

  • 程序員練級攻略（2018）：前端性能優化和框架

    摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...

    VEIGHTZ 評論0 收藏0

  • 程序員練級攻略（2018）：前端性能優化和框架

    摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...

    CoffeX 評論0 收藏0

發表評論

0條評論

mushang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<