Mobx重構React WebApp

cartoon 發布于2019-08-21 17:03 / 458人閱讀

摘要：發現很有趣，所以我把這個項目用重構了一次。舊的版本是用全家桶，就是構建的在的的分支上。其次就是性能優化的問題。就是無論如何，只要和發生了變化，就要發生一次。因為和數據已經解耦了。會檢測被觀察的數據，只要數據發生改變，它就會去重新渲染。

背景

前一陣子，我剛寫了篇React全家桶實戰，介紹了下我用react全家桶構建一個react webapp的中遇到的一些問題。后來，我發現了mobx。然后靜下心去看一看它的文檔。發現很有趣，所以我把這個項目用mobx重構了一次。舊的版本是用react全家桶，就是react+redux構建的, 在github的old-verson的分支上。大家有興趣也可以看看。

源碼地址

傳送門
如果可以，希望大家star一下，給我點鼓勵。感謝~

開發體會

首先redux很強大，單項數據流的思想，可以讓我們很好地去將數據和UI解耦。我們要修改UI，只能通過發起一個action給reducer，然后reducer經過一系列操作，得出一些新的state,然后這個state便會讓UI更新。但是有個比較蛋疼的地方就是，我們要寫得太多了，我們最起碼要寫一個actionType, 一個actionCreator，一個reducer，當然還得創建一個store。如果有異步操作，那還得寫更多一點，這會讓我開發起來的時候比較枯燥。不知道你們有沒有，反正，我是有時候想到要寫那么多東西，我就有點動力不足了。

其次就是性能優化的問題。就react中每個組件都有一個shouldComponentUpdate的函數，不過它默認總是返回true的。就是無論如何，只要state和props發生了變化，就要發生一次render。但是有時候是不需要更新的。雖然可以引入immutable-js來創建js不可變的數據，加上在shouldComponentUpdate搞點判斷。但是，額，好吧，我覺得引入也挺麻煩的，感覺有點難以在現有的項目里插入（大神別噴我~）。

最后呢，mobx可以比較好解決我上面的兩個問題。mobx的寫法不難，看一個下午，就可以開始動手寫代碼了。而且對在原來代碼上修改可以比較迅速。因為UI和數據已經解耦了。你只要在store與UI和store的連接部分修改即可。還有就是mobx讓你不再使用setState,那你也可以規避setState的異步更新的問題。mobx會檢測被觀察的數據，只要數據發生改變，它就會去重新渲染UI。當然還有很多很好的地方，每個人理解不一樣罷了。這里就不深究mobx。畢竟我也只是處于一個能用的階段。

最后

最后這里展示下demo

當然還有，歡迎大家star和fork, 傳送門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89063.html

Redux 的問題：React、MobX 和 Realm 能解決嗎？

摘要：它是由一個非常聰明的人開發的，用來緩解在單頁面應用中管理狀態的問題。的問題沒有一種適合所有場景的完美工具。為設計的是世界的另一個新增內容，但目前僅適用于。這將導致最后期限延長，并且留下更多需要我們維護的代碼。原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不討厭 ...

snifes 2019-08-21 16:41 評論0 收藏0
【譯】Redux 還是 Mobx，讓我來解決你的困惑！

摘要：我現在寫的這些是為了解決和這兩個狀態管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數式編程是不斷上升的范式，但對于大部分開發者來說是新奇的。規模持續增長的應原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評論0 收藏0
基于Mobx的多頁面小程序的全局共享狀態管理實踐

摘要：所以雖然是是用在小程序上，不過我想對于的狀態管理，也有這么一丟丟啟發。在目錄下放入和這兩個庫，同時在目錄下新建用于存放全局狀態。建立由于小程序中不支持裝飾器，所以采用了的寫法。另外，小程序中不支持路徑的省略。 what 名字很長很繞靠口，總的來說，本文是對開發小程序過程中使用mobx的一個總結。狀態管理，相比大家也很熟悉，顧名思義，是對前端頁面繁復的狀態進行管理，在此，我也不過多贅...

SexySix 2019-08-20 18:20 評論0 收藏0
Electron 14.0.0 發布、StackBlitz 支持快速創建 Nuxt.js 應用 |

摘要：發布發布節奏變化從月份的開始，將每周發布一個新的穩定版本。將于年月日開始測試，穩定版將于年月日發布。一個使用和實現了個用戶界面的頁面。實踐總結是一個現代的企業級框架，提供了強大的和許多開箱即用的功能。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x...

Jensen 2021-09-08 09:45 評論0 收藏0
前端每周清單第 50 期: AngularJS and Long Term Support, Web

摘要：在該版本發布之后，開發團隊并不會繼續發布新的特性，而會著眼于進行重大的錯誤修復。發布每六個星期，團隊就會創建新的分支作為發布通道，本文即是對新近發布的版本進行簡要介紹。 showImg(https://segmentfault.com/img/remote/1460000013229009); 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱...

DobbyKim 2019-08-26 11:38 評論0 收藏0