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