資訊專欄INFORMATION COLUMN
摘要：我的教程可能也會幫你一把其他的二分法展示型組件和容器型組件這種分類并非十分嚴格，這是按照它們的目的進行分類。在我看來，展示型組件往往是無狀態(tài)的純函數(shù)組件，容器型組件往往是有狀態(tài)的純類組件。不要把展示型組件和容器型組件的劃分當成教條。
本文譯自Presentational and Container Components，文章的作者是Dan Abramov，他同時也是Redux和Create React App的作者。
在實際使用React + Redux 技術(shù)棧的開發(fā)過程中，非常好的理解了容器型組件和展示型組件的概念是開發(fā)出易維護，可復用React App的基礎(chǔ)
在開發(fā)React應用的時候，我發(fā)現(xiàn)了一種極其簡單的開發(fā)模式。如果你已經(jīng)用過一段時間的React，你也許已經(jīng)發(fā)現(xiàn)了它。這篇文章已經(jīng)講的很好了，但是我想補充幾點。
如果你將組件分為兩類，你會發(fā)現(xiàn)它們更容易被復用和理解。我把這兩類稱為容器型組件 和 展示型組件 ，但是我也聽說過其他名字，比如臃腫型組件和簡單型組件，智能型組件和傻瓜型組件，有狀態(tài)組件和純組件，封裝型組件和元組件等等。它們不完全相同，但是在核心觀點上是相似的。
展示型組件
關(guān)心數(shù)據(jù)的展示方式
內(nèi)部可能包含展示型組件和容器型組件，并且通常存在其他DOM元素及其樣式
允許通過this.props.children控制組件
不依賴app中的其它文件，像Flux的actions或stores
不關(guān)心數(shù)據(jù)是如何加載和變化的
僅通過props接收數(shù)據(jù)和回調(diào)函數(shù)
幾乎不用組件內(nèi)的state（如果用到的話，也僅僅是維護UI狀態(tài)而不是數(shù)據(jù)狀態(tài)）
除非需要用到state,生命周期函數(shù)或性能優(yōu)化，通常寫成函數(shù)式組件，
例如：Page,Sidebar,Story,UserInfo,List
容器型組件
關(guān)心數(shù)據(jù)的運作方式
內(nèi)部可能包含展示型組件和容器型組件，但是通常沒有任何用于自身的DOM元素，除了一些用于包裹元素的div標簽，并且不存在樣式
為展示型組件和容器型組件提供數(shù)據(jù)和操作數(shù)據(jù)的方法
調(diào)用Flux actions并以回調(diào)函數(shù)的方式給展示型組件提供actions
通常是有狀態(tài)的，并且作為數(shù)據(jù)源存在
通常由高階函數(shù)生成例如React Redux的connect()，Realy的createContainer，或者Flux Utils的Container.create(),而不是手寫的
例如：UserPage,FollowersSidebar,StoryContainer,FollowedUserList
為了清晰的區(qū)分這兩種組件，我把放在不同的文件夾中
這種方法的優(yōu)勢關(guān)注點分離。通過用這種方式開發(fā)組件，你可以更好的理解你的app和UI
更好的復用性。你可以在不同的數(shù)據(jù)源中使用相同的展示型組件，也可以把它們放進不同容器型組件中更進一步的進行復用
展示型組件是你的app必不可少的"調(diào)色板"，你可以把它們放在一個獨立的頁面中，讓設(shè)計師隨意拖拽它們的變量而不改變應用的邏輯。在這個頁面上進行頁面快照回歸測試
這種方法逼你去把用于布局的組件抽出來，例如Sidebar，Page，ContextMenu。然后通過子組件的方式引入而不是在各個容器型組件中復制粘貼已有的樣式和布局
記住，組件不一定要輸出DOM元素，它們只需要提供UI之間的組合關(guān)系和分界
好好利用這一點
什么時候引入容器？我建議你先用展示型組件搭建你的app。最終你會意識到你給中間的組件傳遞了太多的props。有些組件并不使用這些props，而僅僅向下傳遞。并且當下層組件需要更多數(shù)據(jù)的時候，你必須重寫改寫所有的中間組件。這時候就需要引入一些容器型組件。通過這種方式，你可以從葉子節(jié)點組件獲取數(shù)據(jù)和方法，而不用考慮處于中間的組件。
這需要邊開發(fā)邊重構(gòu)，所以沒有必要一次做對。隨著日常應用這種模式，你會組件培養(yǎng)出一種『這時候我該抽出一個Container』的直接，就像你已經(jīng)知道什么時候應該提取出一個函數(shù)一樣。我的Redux教程可能也會幫你一把
其他的二分法展示型組件和容器型組件這種分類并非十分嚴格，這是按照它們的目的進行分類。
為了與之前的概念做比較，這是一些相關(guān)但不同的二分法
有狀態(tài)和無狀態(tài) 有些組件使用React的setState()方法，有些不用。容器型組件往往是有狀態(tài)的而展示型組件往往是無狀態(tài)的，這并不是一條鐵律。展示型組件也可以是有狀態(tài)的，容器型組件也可以是無狀態(tài)的
類和函數(shù) 從React0.14開始，組件既可以聲明為類也可以聲明為函數(shù)。函數(shù)式組件可以定義的更簡單但是也缺少一些只能在類組件中使用的特寫。有些限制可能未來會消除，但是在當下仍然是存在的。由于函數(shù)式組件更加易于理解，所以我建議你盡量的使用它。除非你需要state，生命周期函數(shù)，或者性能優(yōu)化，這些特性只有在類組件中才可以使用。
純和非純 如果一個組件在輸入相同props的情況下總是輸出相同的結(jié)果，那我們稱這個組件為pure component。pure component既可以聲明為類組件也可以聲明為函數(shù)式組件，即可以是有狀態(tài)的也可以是無狀態(tài)的。另一個重要的方面是，pure component不依賴props和state的深層比對，所以可以在shouldComponentUpdate方法中進行淺比較優(yōu)化性能，但是在未來可能有很多變化。
展示型組件和容器型組件都可以放進以上任何一種二分法中。在我看來，展示型組件往往是無狀態(tài)的純函數(shù)組件，容器型組件往往是有狀態(tài)的純類組件。然而這并不是一種要求，而是一種現(xiàn)象，并且在一些特定的場景中我也確實見過完全相反的情況。
不要把展示型組件和容器型組件的劃分當成教條。有的時候沒有必要對二者進行區(qū)分。如果你不太確定一個組件是展示型組件還是容器型組件，也許現(xiàn)在還不是區(qū)分它的時候，別太心急！
例子Michael Chan為我們用一個gist闡釋了上面的道理
延伸閱讀Redux入門
Mixins模式已死，組合模式永存
容器型組件
Atomic Web Design
Building the Facebook News Feed with Relay
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93367.html
摘要：我現(xiàn)在寫的這些是為了解決和這兩個狀態(tài)管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數(shù)式編程是不斷上升的范式，但對于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...
摘要：作者滬江前端開發(fā)工程師本文原創(chuàng)翻譯，有不當?shù)牡胤綒g迎指出。管理數(shù)據(jù)，而提供服務(wù)器上的數(shù)據(jù)，因此應用于處理網(wǎng)絡(luò)請求。結(jié)論使用建立的應用都是模塊化的會成為其中一個模塊，庫是另一個模塊。原文原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當當開售。 作者：Oral （滬江Web前端開發(fā)工程師）本文原創(chuàng)翻譯，有不當?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。 當你問起有關(guān)AJAX與React時，老司機們首先就會...
摘要：協(xié)調(diào)狀態(tài)的這三個方面是前端開發(fā)的重要組成部分，對這項任務(wù)有不同程度的支持。這使得保持高度統(tǒng)一。的真正威力到目前為止，看上去只是的輔助工具。在的術(shù)語中這稱之為派發(fā)動作。撤銷重做流行的撤銷重做功能需要系統(tǒng)級規(guī)劃。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 你知道 Redux 真正的作用遠不止狀態(tài)管理嗎？ 你是否想要了解 Redux 的工作原理？ 讓我們深入研究 ...
摘要：它是由一個非常聰明的人開發(fā)的，用來緩解在單頁面應用中管理狀態(tài)的問題。的問題沒有一種適合所有場景的完美工具。為設(shè)計的是世界的另一個新增內(nèi)容，但目前僅適用于。這將導致最后期限延長，并且留下更多需要我們維護的代碼。 原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不討厭 ...
摘要：而不是卷入無休止的撕逼，用了某某而產(chǎn)生的優(yōu)越，甚至借貶低他人來抬高自己。 前言 ?這是一個系列文章，旨在分享在react及相關(guān)技術(shù)棧實踐過程中的個人感悟，心得。如果有不好的地方，歡迎各位批評指正。 ?由于對react本身還未深入了解，今天我們先來談一談redux相關(guān)的問題。 Who creates it? ?Dan Abramov是redux的作者，同時，他也是Create React...
閱讀 2853·2021-11-22 15:22
閱讀 19264·2021-09-22 15:00
閱讀 1443·2021-09-07 09:58
閱讀 1245·2019-08-30 13:01
閱讀 2438·2019-08-29 16:27
閱讀 2353·2019-08-26 13:25
閱讀 1625·2019-08-26 12:13
閱讀 944·2019-08-26 11:53
