摘要:它是由一個(gè)非常聰明的人開發(fā)的,用來(lái)緩解在單頁(yè)面應(yīng)用中管理狀態(tà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
首先,我不討厭 Redux。它是由一個(gè) 非常聰明的人 開發(fā)的,用來(lái)緩解在單頁(yè)面應(yīng)用中管理狀態(tài)的問題。而且,確實(shí)解決了這個(gè)問題。你可以使用 Redux 將狀態(tài)從高層的 store 連接到每個(gè)組件,只 map 該組件需要用到的狀態(tài)。
在本文中,我想分享我們?yōu)榭蛻魟?chuàng)建移動(dòng)應(yīng)用的一些經(jīng)驗(yàn)。在 Quantum Mob,我們主要的 webapps 是由React 編寫的,而我們的移動(dòng)技術(shù)棧用的是由 React Native。React Native 允許在 Android / iOS 之間共享大部分代碼,并且從產(chǎn)品的網(wǎng)頁(yè)版本重用代碼變得更容易,因?yàn)樗胀ǖ?React 很相似。
Redux 的問題沒有一種適合所有場(chǎng)景的完美工具。即使你喜歡某種東西,也要清楚客觀地去看待它,特別是那些賣力宣傳的東西。你使用它只是因?yàn)檫@很酷,還是因?yàn)樗亲钫_的選擇?如果一個(gè)東西要求得太多,那么它的宣傳根本對(duì)不起其本身的價(jià)值。
不用懷疑我的話,Dan Abramov 以作者身份寫了關(guān)于他對(duì) Redux 的看法,試圖讓人們停下來(lái)考慮,Redux 是否真正適合你的項(xiàng)目。
如果你在用 “Redux 方式” 做事的時(shí)候感到壓力,這表明你或你的團(tuán)隊(duì)可能過(guò)于看重它了。這只是你們工具箱中的一個(gè)工具,一個(gè)瘋狂的實(shí)驗(yàn)。-Dan Abramov
隨著 npm,Node 以及構(gòu)建工具(grunt,gulp,webpack ...)的出現(xiàn),在每個(gè)項(xiàng)目中需要使用的庫(kù)和框架在呈爆炸式增長(zhǎng)。
你的項(xiàng)目需要處理日期嗎?為什么不使用 MomentJs?你要處理數(shù)組嗎?再加上像 lodash 或 Ramda。如果你不使用 Babel 和 Axios,以及一個(gè)好的 CSS 框架,我不能想象那將會(huì)怎樣。必須確保編譯你的同構(gòu)應(yīng)用,即使這只是個(gè) Hello World 應(yīng)用。
Redux 引入一些概念,你需要花時(shí)間去學(xué)習(xí)它們。將需要翻閱文檔并瀏覽教程,因?yàn)椴恢皇呛?jiǎn)單調(diào)用保存,然后再獲取數(shù)據(jù)那么簡(jiǎn)單。
要使用 Redux 的話,需要設(shè)計(jì)好 store,創(chuàng)建多個(gè) reducer 并將其組合在一起。然后,使用 connect 或者其他什么,為每個(gè)需要跟 store 交互的組件配置 mapStateToProps 和 mapDispatchToProps。
對(duì)于每個(gè)組件,都有一個(gè)用于 JavaScript 的文件,一個(gè)用于樣式的文件,另一個(gè)用于 JSX。Redux 將這些東西與 action 和 reducer 文件相結(jié)合,另一個(gè)將其全部整合在一起。確實(shí)這樣很 Redux,但如果你只想某個(gè)地方使用怎么辦?對(duì)于簡(jiǎn)單的例子,引入像 Redux 這樣強(qiáng)大的工具其實(shí)是過(guò)度工程的。
備選方案 局部狀態(tài)(local state)Redux 的另一種替代方法是保持簡(jiǎn)單,使用組件的局部狀態(tài)。意思是保持最開始時(shí)候簡(jiǎn)單的架構(gòu)就好,只有在需要時(shí)才添加 redux。容易吧?
以下是 Dan 的一個(gè) 很好的例子,說(shuō)明如何將一個(gè)簡(jiǎn)單的計(jì)數(shù)器在不使用 Redux 的情況重構(gòu)為 Redux 風(fēng)格的??纯此奈恼?,寫得很好,他是這個(gè)話題的權(quán)威。
MobXMobX 比 Redux 更新,現(xiàn)在肯定有很多討論。MobX 承諾的是提供 Redux 的所有功能,但是更少的樣板代碼。這個(gè)缺點(diǎn)當(dāng)然是微不足道的,不應(yīng)該期望它與 Redux 具有相同的控制級(jí)別。
MobX 是如何工作的?你可以創(chuàng)建想要 store 的數(shù)據(jù)模型作為一個(gè) class,并將使用 @observable 裝飾器添加到 MobX 管理的地方,而不是把重點(diǎn)放在改變和 reduce 的細(xì)節(jié)上。
另一件事是,你的對(duì)象不必像 Redux 那樣進(jìn)行歸一化處理。這在某些情況下可能是件好事,而在其他情況下也可能是件壞事。例如,有一個(gè)很大的數(shù)組,在通過(guò)它搜索某個(gè)值的時(shí)候可能會(huì)遇到性能問題,需要認(rèn)識(shí)到這一點(diǎn)。
如果你想快速了解一下 MobX,可以從這個(gè)與 Redux 比較的4分鐘的視頻開始。
Youtube 上的視頻:Understanding MobX vs Redux
如果你喜歡 MobX 官方的說(shuō)法,請(qǐng)查看他們的 “十分鐘介紹”。如果希望看到一個(gè)更客觀的觀點(diǎn),這里有一個(gè)開發(fā)者使用 MobX 示例 。
為 React Native 設(shè)計(jì)的 RealmRealm 是 React 世界的另一個(gè)新增內(nèi)容,但目前僅適用于 React Native。如果你正在制作移動(dòng)應(yīng)用,那絕對(duì)值得一看。除了存儲(chǔ)和管理你的域數(shù)據(jù)之外,Realm 還增加了數(shù)個(gè)與服務(wù)器同步的數(shù)據(jù),離線支持和加密功能。
為了幫助了解使用 Realm 的理由,他們提出了一個(gè)可以快速開始的真實(shí)世界的例子。移動(dòng)應(yīng)用程序通常執(zhí)行多次搜索,從而本地存儲(chǔ)數(shù)據(jù),以避免額外調(diào)用影響性能,并提供更好的用戶體驗(yàn)。
Youtube 上的視頻:Realm
應(yīng)該將 Realm 視為直接集成到應(yīng)用程序中的一個(gè)數(shù)據(jù)庫(kù)。能夠提供很好的速度,因?yàn)樘幚淼膶?duì)象引用與數(shù)據(jù)庫(kù)具有相同的引用,并將其保存到本地存儲(chǔ),因此任何更改或搜索都不會(huì)被序列化或發(fā)送到任何地方。
結(jié)論沒有任何工具對(duì)于每一種情況都是完美的,并不建議徹底放棄 Redux。Redux 很棒,但隨之而來(lái)的是創(chuàng)建附加的樣板代碼。這將導(dǎo)致最后期限延長(zhǎng),并且留下更多需要我們維護(hù)的代碼。
在某些組件上使用局部狀態(tài)是很合適的,如果復(fù)雜性發(fā)生變化,也可以很容易地使用 Redux 重構(gòu)。
雖然 MobX 和 Realm 不是作為狀態(tài)容器而設(shè)計(jì)的,但它們可以輕松管理大部分?jǐn)?shù)據(jù)。強(qiáng)烈建議試試這兩個(gè)庫(kù),看看它們是否適合你的項(xiàng)目。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/88605.html
摘要:知乎專欄前端給不了解前端的同學(xué)講前端掘金前端夠得到安全跨站請(qǐng)求偽造掘金前端面試問題持續(xù)更新掘金向核心貢獻(xiàn)代碼的六個(gè)步驟基于的仿音樂移動(dòng)端個(gè)人文章用構(gòu)建組件網(wǎng)易嚴(yán)選感受開發(fā)已完結(jié)掘金英文 2017-09-23 前端日?qǐng)?bào) 精選 [譯] 網(wǎng)絡(luò)現(xiàn)狀:性能提升指南前端夠得到Web安全3--點(diǎn)擊劫持/UI-覆蓋攻擊React, Jest, Flow, Immutable.js將改用MIT開源協(xié)議N...
摘要:我現(xiàn)在寫的這些是為了解決和這兩個(gè)狀態(tài)管理庫(kù)之間的困惑。這甚至是危險(xiǎn)的,因?yàn)檫@部分人將無(wú)法體驗(yàn)和這些庫(kù)所要解決的問題。這肯定是要第一時(shí)間解決的問題。函數(shù)式編程是不斷上升的范式,但對(duì)于大部分開發(fā)者來(lái)說(shuō)是新奇的。規(guī)模持續(xù)增長(zhǎng)的應(yīng) 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...
摘要:希望大家在這浮夸的前端圈里,保持冷靜,堅(jiān)持每天花分鐘來(lái)學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個(gè)月前出了248個(gè)Vue的知識(shí)點(diǎn),受到很多朋友的關(guān)注,都強(qiáng)烈要求再出多些React相前的面試題,受到大家的邀請(qǐng),我又找了20多個(gè)React的使用者,他們給出了328道React的面試題,由我整理好發(fā)給大家,同時(shí)發(fā)布在了前端面試每日3+1的React專題,希望對(duì)大家有所幫助,同時(shí)大...
摘要:面試官比較著急了,跟我溝通的時(shí)候,我才知道返回值不一定非要跟原生的一樣。騰訊一面平常開發(fā)怎么設(shè)計(jì)組件的??偨Y(jié)騰訊面試的感覺就是,沒有那么正式,都是部門的技術(shù)直接聯(lián)系的你,然后二面就是部門負(fù)責(zé)人了,決定了是否入職。 引入 面試過(guò)去了這么久,把八月份面試題和總結(jié)發(fā)一下吧,雖然年底大家可能都不換工作~ 還是可以看看的。 關(guān)于面試,引用葉老濕的一句話。你的簡(jiǎn)歷是自己工作的答卷,項(xiàng)目經(jīng)歷是你給面...
摘要:需要注意的是,在中,需要把數(shù)據(jù)聲明為。同時(shí)還提供了運(yùn)行時(shí)的類型安全檢查。在利用了,使異步操作可以在一個(gè)函數(shù)內(nèi)完成并且可以被追蹤。例如在中,數(shù)組并不是一個(gè),而是一個(gè)類的對(duì)象,這是為了能監(jiān)聽到數(shù)據(jù)下標(biāo)的賦值。 Redux是一個(gè)數(shù)據(jù)管理層,被廣泛用于管理復(fù)雜應(yīng)用的數(shù)據(jù)。但是實(shí)際使用中,Redux的表現(xiàn)差強(qiáng)人意,可以說(shuō)是不好用。而同時(shí),社區(qū)也出現(xiàn)了一些數(shù)據(jù)管理的方案,Mobx就是其中之一。 R...
閱讀 3385·2021-11-22 12:04
閱讀 2771·2019-08-29 13:49
閱讀 535·2019-08-26 13:45
閱讀 2323·2019-08-26 11:56
閱讀 1071·2019-08-26 11:43
閱讀 648·2019-08-26 10:45
閱讀 1330·2019-08-23 16:48
閱讀 2231·2019-08-23 16:07