主要比較參數(shù)：
- 庫體積，打包項目體積
- 開發(fā)體驗
- 性能對比
在對比參數(shù)前首先分析一下redux和mobx的設(shè)計模式靴迫，redux和mobx都沒有使用傳統(tǒng)的mvc/mvvm形式，而且他們使用flux結(jié)構(gòu)也略有不同楼誓，這個也是造成redux和mobx各項參數(shù)不同的緣由之一玉锌。
mvc/mvvm和flux的對比
如圖可知，mvc在處理多數(shù)據(jù)和復(fù)雜業(yè)務(wù)是有一定局限性的疟羹，一個view層可能會調(diào)用到無數(shù)個model層主守，當(dāng)然解決這個問題的方法也是有的禀倔，我們可以將多個model抽象成一個model，例如處理基礎(chǔ)數(shù)據(jù)的model合成一個基礎(chǔ)model参淫，但這樣編寫也會造成代碼的冗余以及沒必要的性能損耗救湖。
flux對比mvc，代碼結(jié)構(gòu)更加簡單涎才、一目了然鞋既。action處理數(shù)據(jù)請求，然后將請求dispatch到store中耍铜，這樣設(shè)計也十分契合react單向數(shù)據(jù)流的概念邑闺。在本文提到的兩個框架redux和mobx也都是基于flux的設(shè)計概念，不同的是mobx在store和view中處理數(shù)據(jù)是使用的雙向綁定棕兼，如下圖陡舅。
雙向綁定無疑會增加性能消耗，但是mobx在雙向綁定的同時禁掉了react自身的刷新伴挚，要知道react shouldupdate生命周期是性能優(yōu)化的大頭靶衍，mobx禁掉了這個性能會直接大幅提升，但這個和雙向綁定的性能消耗相比誰占用的性能更高章鲤，讓我們用數(shù)據(jù)比較摊灭。
庫體積，打包項目體積
我選用了兩個相似的項目败徊，一個使用redux開發(fā)帚呼，一個mobx(之所以沒用兩個框架把一個項目寫兩遍是因為我太懶了)。
表紅的部分是抽出的lib和打包的js皱蹦，一個是64.2k煤杀，一個是29.2k。
這個項目redux lib是webpack手動打包的沪哺，沒有像mobx項目用打包版本沈自，體積是43.2k，app.js由于比mobx項目多使用了一個svg庫（32k）辜妓，體積達(dá)到了62.3k枯途，減去多的一個庫大概30.3k。
綜上籍滴，redux比mobx打包體積略大酪夷，幾乎可以忽略不記，但是lib包比mobx小20k孽惰，所以這輪redux勝晚岭，ヾ(=▽=)ノ。
開發(fā)體驗
- 學(xué)習(xí)成本：mobx基本看一遍勋功，看看demo就能上手寫了坦报；redux看兩天库说，寫了個練手demo才勉強(qiáng)會。
- 開發(fā)效率：由于mobx是雙向綁定的片择，開發(fā)的時候你會覺得mobx寫的都是有效代碼潜的；redux寫同一個功能會多寫很多代碼，代碼邏輯繞啊繞字管。
- 代碼質(zhì)量：redux直接寫夏块，不做react渲染優(yōu)化是個大坑，但是react渲染優(yōu)化又比較繁瑣纤掸，可能還要添加第三方插件脐供，增加不必要的代碼量。mobx基本不做渲染優(yōu)化借跪，渲染更新政己，是否更新的生命周期都被禁用了，還優(yōu)化個屁掏愁。歇由。。果港。
綜上 開發(fā)體驗上mobx比redux領(lǐng)先太多沦泌。
性能對比 此次比較是redux項目已經(jīng)優(yōu)化，mobx項目未優(yōu)化的情況下進(jìn)行的辛掠，mobx項目優(yōu)化后會補(bǔ)坑
- 初始渲染
感官是mobx更快谢谦，但是實際....下面上圖。下面兩張圖是初次渲染的圖萝衩，明顯mobx在內(nèi)存占用上更大回挽，我考慮的原因mobx和redux渲染部分都是靠的react，這部分差別不大猩谊，主要是mobx多了雙向綁定導(dǎo)致最大內(nèi)存數(shù)值很高千劈。在布局和渲染方面mobx優(yōu)勢明顯，主要得益于mobx禁用了react大部分的生命周期牌捷，很大程度的減少了刷新次數(shù)墙牌，這次用的redux項目已經(jīng)是優(yōu)化過了渲染次數(shù)的，但還是渲染這么多次不禁汗顏暗甥。javascript與事件這塊沒有做太多了解喜滨，待填坑。
- 內(nèi)存穩(wěn)定后測同樣操作的性能锯梁。
redux最大內(nèi)存162即碗，但渲染次數(shù)還是驚人焰情。
mobx內(nèi)存最大290，唯一欣慰的是渲染次數(shù)比較少剥懒。
總結(jié)
優(yōu)化過后的redux項目性能比較好内舟，mobx暫時還沒想到特別好的優(yōu)化方案，找到了會補(bǔ)坑初橘；框架體驗验游，開發(fā)效率，學(xué)習(xí)成本方面mobx更好保檐，希望優(yōu)化過后的mobx性能有所提升耕蝉；代碼打包體積redux確實要小點，但是如果項目比較龐大夜只，redux開發(fā)代碼會比mobx多不少垒在，體積這方面基本可以忽略。
