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