摘要:七宗罪目前已經(jīng)成為了前端開發(fā)領(lǐng)域內(nèi)較為主流的一種架構(gòu)模式。以下詳細(xì)探討最主要的個(gè)問題,簡(jiǎn)稱七宗罪。一過多的文件眾所周知由三個(gè)部分組成。雖然功能強(qiáng)大但相對(duì)較重而且目前主要使用的僅僅是部分。
Redux“七宗罪”
React+Redux目前已經(jīng)成為了前端開發(fā)領(lǐng)域內(nèi)較為主流的一種架構(gòu)模式。其中React負(fù)責(zé)頁(yè)面渲染,Redux負(fù)責(zé)管理所有的業(yè)務(wù)數(shù)據(jù),如下圖所示。引入redux確實(shí)能夠很好的將數(shù)據(jù)與UI解藕,讓React組件做到最大程度的復(fù)用性,但也帶來了很多問題,這些問題都一定程度上降低了業(yè)務(wù)開發(fā)效率。以下詳細(xì)探討redux最主要的7個(gè)問題,簡(jiǎn)稱“七宗罪”。
一 過多的文件
眾所周知redux由三個(gè)部分組成:store、action、reducer。在使用redux時(shí),當(dāng)我們開發(fā)一個(gè)頁(yè)面,我們就需要定義所有和這個(gè)頁(yè)面邏輯相關(guān)的action。在處理業(yè)務(wù)數(shù)據(jù)時(shí),我有由需要給每個(gè)頁(yè)面或者時(shí)某種資源定義相應(yīng)的reducer,久而久之,我們的項(xiàng)目里就有了許多action和reducer文件。過多的文件不僅增加了開發(fā)成本還會(huì)導(dǎo)致開發(fā)者在進(jìn)行業(yè)務(wù)開發(fā)時(shí)不斷的切換文件,降低了開發(fā)效率。
二 業(yè)務(wù)邏輯割裂
redux框架中使用了reducer這一函數(shù)式編程的工具來進(jìn)行數(shù)據(jù)管理,對(duì)獲取到的數(shù)據(jù)(用戶通過UI交互產(chǎn)生或后臺(tái)數(shù)據(jù)返回)進(jìn)行加工和保存。在前端開發(fā)中的業(yè)務(wù)邏輯一般包含了四個(gè)部分:收集數(shù)據(jù)、發(fā)送請(qǐng)求、接收請(qǐng)求、處理數(shù)據(jù),如下圖所示,這四個(gè)步驟一般出現(xiàn)在一個(gè)文件里,相對(duì)容易修改和維護(hù)。而redux把處理數(shù)據(jù)的邏輯多帶帶抽離出來放入了reducer中,一定程度上增加了業(yè)務(wù)邏輯開發(fā)流程,讓開發(fā)者必須定義好reducer中接受數(shù)據(jù)的格式,并且需要經(jīng)常在不同文件中切換,造成了業(yè)務(wù)邏輯割裂。
三 不必要的消息機(jī)制
在使用redux框架的項(xiàng)目中,涉及到store中數(shù)據(jù)更新的都需要通過發(fā)送一個(gè)action觸發(fā),這是一種典型的消息機(jī)制驅(qū)動(dòng)的軟件系統(tǒng)設(shè)計(jì)。消息機(jī)制在大型項(xiàng)目中解藕不同模塊,提高可測(cè)試性和可擴(kuò)展性方面都有不錯(cuò)的表現(xiàn),但在一些小型項(xiàng)目中確沒有起到什么本質(zhì)性的幫助,反而需要開發(fā)者創(chuàng)建不同類型的action并定義action中payload的格式,增加了業(yè)務(wù)開發(fā)的整體流程。redux的本質(zhì)是一個(gè)數(shù)據(jù)流管理工具,action的引入讓系統(tǒng)毫無選擇的被設(shè)計(jì)成消息機(jī)制驅(qū)動(dòng),對(duì)開發(fā)者不太友善。
四 強(qiáng)制語(yǔ)法
redux的reducer的寫法必須符合特定的格式,即每個(gè)reducer函數(shù)都必須返回一個(gè)新的對(duì)象。我們翻看一下源碼不難發(fā)現(xiàn),作者在這里才作用了比較對(duì)象地址來進(jìn)行判斷,如下所示。這種強(qiáng)制的語(yǔ)法不僅開銷巨大,同樣對(duì)開發(fā)者不太友善,一旦忘記這個(gè)約束就會(huì)造成業(yè)務(wù)邏輯錯(cuò)誤。
for (var _i = 0; _i < finalReducerKeys.length; _i++) { var _key = finalReducerKeys[_i]; var reducer = finalReducers[_key]; var previousStateForKey = state[_key]; var nextStateForKey = reducer(previousStateForKey, action); if (typeof nextStateForKey === "undefined") { var errorMessage = getUndefinedStateErrorMessage(_key, action); throw new Error(errorMessage); } nextState[_key] = nextStateForKey; hasChanged = hasChanged || nextStateForKey !== previousStateForKey; }
五 龐大的計(jì)算開銷
我們繼續(xù)查看上面的redux源碼,當(dāng)一個(gè)action被dispatch出去后,reducer是如何被執(zhí)行的呢?注意到源碼中遍歷了所有的reducer并逐個(gè)比較返回的對(duì)象有沒有改變。這就意味著任何一個(gè)action都會(huì)觸發(fā)所有的reducer被執(zhí)行一次,其中的計(jì)算開銷是顯而易見的。
六 陡峭的學(xué)習(xí)曲線
redux作為一個(gè)前端數(shù)據(jù)流框架,內(nèi)容較多,學(xué)習(xí)成本是相對(duì)較高的。redux中的store和reducer的使用方式是典型的函數(shù)式編程的方法,這對(duì)于習(xí)慣了面向?qū)ο缶幊痰拈_發(fā)者來說需要一定的學(xué)習(xí)成本。此外action這種消息類型的開發(fā)模式對(duì)于前端開發(fā)者來說也相對(duì)陌生,需要一定的學(xué)習(xí)時(shí)間。
七 不成熟的生態(tài)
目前圍繞redux的相關(guān)技術(shù)比較多,主要都是redux的一些中間件,比如: redux-promise、redux-observable、saga等等。redux-promise、redux-observable都能解決異步數(shù)據(jù)的問題,但對(duì)業(yè)務(wù)開發(fā)的實(shí)質(zhì)性幫助并不大。saga雖然功能強(qiáng)大但相對(duì)較重而且目前主要使用的僅僅是side effects部分??傮w來說圍繞redux的相關(guān)框架都不是特別成熟,尚不能對(duì)業(yè)務(wù)開發(fā)起到非常大的幫助。
結(jié)尾
上文總結(jié)了redux的“七宗罪”,前端數(shù)據(jù)流框架的核心任務(wù)就是管理組件之間需要共享的數(shù)據(jù),及時(shí)觸發(fā)組件的重新渲染,這點(diǎn)在如今的前端架構(gòu)中是非常重要的一環(huán)。redux的store能夠很好的完成這一點(diǎn),但引入reducer和action卻帶來了很多問題,降低了項(xiàng)目整體開發(fā)效率。那么一個(gè)合格的數(shù)據(jù)流框架究竟應(yīng)該是怎樣的呢?在下一篇文章中我會(huì)詳細(xì)介紹我的解決方案-Hytex框架。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/91782.html
摘要:勸說孩子志愿填寫計(jì)算機(jī)專業(yè)成為家長(zhǎng)眼中的為未來籌劃的一小步。預(yù)告歡迎大家閱讀本期唱唱反調(diào)欄目,下周日的同一時(shí)間我會(huì)繼續(xù)更新下一期深扒現(xiàn)今大學(xué)計(jì)算機(jī)專業(yè)七宗罪第二罪面向教材編程祝大家晚安,好夢(mèng) ...
摘要:在中,算法專家凱文斯拉文提起這個(gè)故事,并向觀眾展示了算法控制的圖景。斯拉文把算法稱之為計(jì)算機(jī)用于決策的數(shù)學(xué)。凱文斯拉文表示我們正在用炸藥和巖石鋸打穿美國(guó),讓算法能早微秒完成交易,所有的一切都是為了一個(gè)前所未有的通訊系統(tǒng)。 The Making of a Fly,這是一本1992年出版的學(xué)術(shù)書籍,受研究者喜歡。2011年4月8日,一家書商對(duì)其的售價(jià)為170萬美元,另一家書商標(biāo)價(jià)220萬美元。如...
摘要:一個(gè)對(duì)應(yīng)相應(yīng)的狀態(tài)碼,狀態(tài)碼表示協(xié)議所返回的響應(yīng)的狀態(tài)。下面將狀態(tài)碼歸結(jié)如下繼續(xù)客戶端應(yīng)當(dāng)繼續(xù)發(fā)送請(qǐng)求。繼續(xù)處理由擴(kuò)展的狀態(tài)碼,代表處理將被繼續(xù)執(zhí)行。處理方式丟棄該狀態(tài)碼不被的應(yīng)用程序直接使用,只是作為類型回應(yīng)的默認(rèn)解釋。 本篇內(nèi)容為 python 網(wǎng)絡(luò)爬蟲初級(jí)操作,內(nèi)容主要有以下 3 部分: python 關(guān)于爬蟲的一些基本操作和知識(shí) 靜態(tài)網(wǎng)頁(yè)抓取 動(dòng)態(tài)網(wǎng)頁(yè)抓取 基本操作和知識(shí)...
摘要:協(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博客,一年百來篇優(yōu)質(zhì)文章等著你! 你知道 Redux 真正的作用遠(yuǎn)不止?fàn)顟B(tài)管理嗎? 你是否想要了解 Redux 的工作原理? 讓我們深入研究 ...
閱讀 2384·2023-04-26 02:54
閱讀 2307·2021-10-14 09:43
閱讀 3341·2021-09-22 15:19
閱讀 2837·2019-08-30 15:44
閱讀 2697·2019-08-30 12:54
閱讀 980·2019-08-29 18:43
閱讀 1932·2019-08-29 17:12
閱讀 1325·2019-08-29 16:40