摘要:我把這兩大類稱作和,但是我也聽說(shuō)他們被稱為和和和等。雖然叫法不同,但核心思想都差不多它必須能獨(dú)立運(yùn)作。。不能依賴依賴這個(gè)的或者部分可以允許有這樣的話有助于這個(gè)組件有修改彈性接受數(shù)據(jù)和數(shù)據(jù)的改變只能通過(guò)來(lái)處理不必也不能用。
Smart and Dumb Components
原文地址
當(dāng)我在寫React應(yīng)用的時(shí)候我發(fā)現(xiàn)一種老有用而且簡(jiǎn)單的寫法了。要是你寫了一段時(shí)間React的話。。我估摸著你也應(yīng)該發(fā)現(xiàn)了這種寫法了。這篇文章(下次我就翻譯這片文章)就說(shuō)的很好,但是捏,我還想多差兩句嘴
你要是把你的組件分成兩大類。。你將會(huì)發(fā)現(xiàn),這樣的話你更容易思考你的組件該怎么寫。。而你的組件寫出來(lái)也更容易復(fù)用。我把這兩大類稱作 Smart和 Dumb,但是我也聽說(shuō)他們被稱為Fat 和 Skinny, Stateful 和 Pure, Screens 和 Components等。雖然叫法不同,但核心思想都差不多
Dumb components:-它必須能獨(dú)立運(yùn)作。。不能依賴依賴這個(gè)app的actions 或者 stores 部分
可以允許有this.props.children,這樣的話有助于這個(gè)組件有修改彈性
接受數(shù)據(jù)和數(shù)據(jù)的改變只能通過(guò)props來(lái)處理,不必也不能用state。
組件的外觀能用一個(gè)css來(lái)維護(hù)(這樣才更容易重用,類似支付寶的ant)
很少用到state,(一般呈現(xiàn)動(dòng)畫的時(shí)候可能會(huì)用到。。比如控制下拉框的展開或者收起)
也許會(huì)用到其他的dumb components
比如說(shuō): Page, Sidebar, Story, UserInfo, List,像這些都是dumb components.
smart components:一定包含至少一個(gè)Smart 或者 Dumb的元件,(這肯定啊。。不然他干的啥)
負(fù)責(zé)把從flux(or redux等)接收到的state傳給dumb component
負(fù)責(zé)call action,并把它的callback傳給dumb component
它應(yīng)該只有結(jié)構(gòu)沒(méi)有外觀(這樣的話。。改個(gè)樣式只需要改dumb 組件 就好了。。他寫著。。他寫那里 不然很累?。?/p>
比如說(shuō): UserPage, FollowersSidebar, StoryContainer,
FollowedUserList.
有助理你分離關(guān)注點(diǎn),這樣的話更有助于理解你的app的業(yè)務(wù)邏輯 和 它的ui
更有助于復(fù)用你的dumb組件,你可以將你的dumb組件復(fù)用于別的state下,而且這兩個(gè)state還完全不同
本質(zhì)上dumb 組件 其實(shí) 就是你的app的調(diào)色版。。你可以將它們放到一個(gè)頁(yè)面上。。然后讓設(shè)計(jì)師除了app的業(yè)務(wù)邏輯,樣式隨便怎么改,
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/78269.html
摘要:原文地址我想分享一些文章,來(lái)幫你學(xué)習(xí)的概念和架構(gòu)在開始之前我們先來(lái)看這兩篇文章,用代替和然后我們通過(guò)一個(gè)代碼教程我翻譯地址深入了解,然后看一看超級(jí)介紹完成你對(duì)的探索之旅現(xiàn)在是時(shí)候去學(xué)習(xí)和再往前走理解并且看一看關(guān)于的一切注盡量中文地址的我用的 原文地址 我想分享一些文章,來(lái)幫你學(xué)習(xí)redux的概念和架構(gòu) 在開始redux之前我們先來(lái)看這兩篇文章,用High Order Component...
摘要:對(duì)于很多中間組件來(lái)說(shuō),他們并不需要這些,但是他們還必須傳遞給下一級(jí)組件。更傾向于,而更傾向于,當(dāng)然這并不是絕對(duì)的。這是篇文章翻譯自的 這是篇文章翻譯自medium的:Presentational and Container Components 譯者語(yǔ):這篇文章是緊接著對(duì)我上一篇翻譯的擴(kuò)充,對(duì)Container Component模式描述的更加細(xì),解決了我很多開發(fā)中的困惑。 Prese...
摘要:不只為組件提供中的數(shù)據(jù)及擴(kuò)展方法,它還為定義的組件添加了一系列事件操作,這些事件的核心點(diǎn)就是,然后可以在自己定義的組件內(nèi)獲得。行為功能是對(duì)目的功能和有用行為的一種抽象。下一個(gè)中間件函數(shù)通常由名為的變量來(lái)表示。 redux 這個(gè)是好久之前寫的,一直忘記粘過(guò)來(lái),里面有一些是寫作格式是我自己定義的,所以和segmentfault的markdown語(yǔ)法有出入,圖片也不能加載,所以原文效果可以在...
摘要:同時(shí),有多個(gè)類級(jí)別的靜態(tài)構(gòu)造函數(shù)的方法。這個(gè)累贅,無(wú)論如何,是被傳遞到每個(gè)單獨(dú)的對(duì)象構(gòu)造函數(shù)表達(dá)式中。我們可能只有幾個(gè)特定的擔(dān)憂,提供額外關(guān)鍵字參數(shù)給構(gòu)造函數(shù)。 注:原書作者 Steven F. Lott,原書名為 Mastering Object-oriented Python 沒(méi)有__init__()的無(wú)狀態(tài)對(duì)象 下面這個(gè)示例,是一個(gè)簡(jiǎn)化去掉了__init__()的類。這是一個(gè)常見...
摘要:產(chǎn)生的崩潰測(cè)試用例可能難以分析,因?yàn)槟:郎y(cè)試的行為并不能告訴你關(guān)于軟件內(nèi)部運(yùn)行方式的知識(shí)。模糊測(cè)試向軟件系統(tǒng)提供隨機(jī)輸入。 軟件質(zhì)量保障 專注測(cè)試圈,自動(dòng)化測(cè)試、測(cè)試平臺(tái)開發(fā)、測(cè)試新技術(shù)、大廠測(cè)試崗面經(jīng)分享, 可以幫忙內(nèi)推BATJ等大廠!歡迎加VX溝通交流: ISTE1024 測(cè)試同...
閱讀 2614·2021-10-11 10:58
閱讀 1191·2021-09-29 09:34
閱讀 1561·2021-09-26 09:46
閱讀 3870·2021-09-22 15:31
閱讀 764·2019-08-30 15:54
閱讀 1492·2019-08-30 13:20
閱讀 1282·2019-08-30 13:13
閱讀 1517·2019-08-26 13:52