主要比較參數(shù)：
- 庫(kù)體積，打包項(xiàng)目體積
- 開發(fā)體驗(yàn)
- 性能對(duì)比
在對(duì)比參數(shù)前首先分析一下redux和mobx的設(shè)計(jì)模式，redux和mobx都沒(méi)有使用傳統(tǒng)的mvc/mvvm形式，而且他們使用flux結(jié)構(gòu)也略有不同，這個(gè)也是造成redux和mobx各項(xiàng)參數(shù)不同的緣由之一。
mvc/mvvm和flux的對(duì)比
如圖可知，mvc在處理多數(shù)據(jù)和復(fù)雜業(yè)務(wù)是有一定局限性的，一個(gè)view層可能會(huì)調(diào)用到無(wú)數(shù)個(gè)model層，當(dāng)然解決這個(gè)問(wèn)題的方法也是有的，我們可以將多個(gè)model抽象成一個(gè)model，例如處理基礎(chǔ)數(shù)據(jù)的model合成一個(gè)基礎(chǔ)model，但這樣編寫也會(huì)造成代碼的冗余以及沒(méi)必要的性能損耗。
flux對(duì)比mvc，代碼結(jié)構(gòu)更加簡(jiǎn)單、一目了然。action處理數(shù)據(jù)請(qǐng)求，然后將請(qǐng)求dispatch到store中，這樣設(shè)計(jì)也十分契合react單向數(shù)據(jù)流的概念。在本文提到的兩個(gè)框架redux和mobx也都是基于flux的設(shè)計(jì)概念，不同的是mobx在store和view中處理數(shù)據(jù)是使用的雙向綁定，如下圖。
雙向綁定無(wú)疑會(huì)增加性能消耗，但是mobx在雙向綁定的同時(shí)禁掉了react自身的刷新，要知道react shouldupdate生命周期是性能優(yōu)化的大頭，mobx禁掉了這個(gè)性能會(huì)直接大幅提升，但這個(gè)和雙向綁定的性能消耗相比誰(shuí)占用的性能更高，讓我們用數(shù)據(jù)比較。
庫(kù)體積，打包項(xiàng)目體積
我選用了兩個(gè)相似的項(xiàng)目，一個(gè)使用redux開發(fā)，一個(gè)mobx(之所以沒(méi)用兩個(gè)框架把一個(gè)項(xiàng)目寫兩遍是因?yàn)槲姨珣辛?。
表紅的部分是抽出的lib和打包的js，一個(gè)是64.2k，一個(gè)是29.2k。
這個(gè)項(xiàng)目redux lib是webpack手動(dòng)打包的，沒(méi)有像mobx項(xiàng)目用打包版本，體積是43.2k，app.js由于比mobx項(xiàng)目多使用了一個(gè)svg庫(kù)（32k），體積達(dá)到了62.3k，減去多的一個(gè)庫(kù)大概30.3k。
綜上，redux比mobx打包體積略大，幾乎可以忽略不記，但是lib包比mobx小20k，所以這輪redux勝，ヾ(=▽=)ノ。
開發(fā)體驗(yàn)
- 學(xué)習(xí)成本：mobx基本看一遍，看看demo就能上手寫了；redux看兩天，寫了個(gè)練手demo才勉強(qiáng)會(huì)。
- 開發(fā)效率：由于mobx是雙向綁定的，開發(fā)的時(shí)候你會(huì)覺(jué)得mobx寫的都是有效代碼；redux寫同一個(gè)功能會(huì)多寫很多代碼，代碼邏輯繞啊繞。
- 代碼質(zhì)量：redux直接寫，不做react渲染優(yōu)化是個(gè)大坑，但是react渲染優(yōu)化又比較繁瑣，可能還要添加第三方插件，增加不必要的代碼量。mobx基本不做渲染優(yōu)化，渲染更新，是否更新的生命周期都被禁用了，還優(yōu)化個(gè)屁。。。。
綜上 開發(fā)體驗(yàn)上mobx比redux領(lǐng)先太多。
性能對(duì)比 此次比較是redux項(xiàng)目已經(jīng)優(yōu)化，mobx項(xiàng)目未優(yōu)化的情況下進(jìn)行的，mobx項(xiàng)目?jī)?yōu)化后會(huì)補(bǔ)坑
- 初始渲染
感官是mobx更快，但是實(shí)際....下面上圖。下面兩張圖是初次渲染的圖，明顯mobx在內(nèi)存占用上更大，我考慮的原因mobx和redux渲染部分都是靠的react，這部分差別不大，主要是mobx多了雙向綁定導(dǎo)致最大內(nèi)存數(shù)值很高。在布局和渲染方面mobx優(yōu)勢(shì)明顯，主要得益于mobx禁用了react大部分的生命周期，很大程度的減少了刷新次數(shù)，這次用的redux項(xiàng)目已經(jīng)是優(yōu)化過(guò)了渲染次數(shù)的，但還是渲染這么多次不禁汗顏。javascript與事件這塊沒(méi)有做太多了解，待填坑。
- 內(nèi)存穩(wěn)定后測(cè)同樣操作的性能。
redux最大內(nèi)存162，但渲染次數(shù)還是驚人。
mobx內(nèi)存最大290，唯一欣慰的是渲染次數(shù)比較少。
總結(jié)
優(yōu)化過(guò)后的redux項(xiàng)目性能比較好，mobx暫時(shí)還沒(méi)想到特別好的優(yōu)化方案，找到了會(huì)補(bǔ)坑；框架體驗(yàn)，開發(fā)效率，學(xué)習(xí)成本方面mobx更好，希望優(yōu)化過(guò)后的mobx性能有所提升；代碼打包體積redux確實(shí)要小點(diǎn)，但是如果項(xiàng)目比較龐大，redux開發(fā)代碼會(huì)比mobx多不少，體積這方面基本可以忽略。
