微信号:ardays

介绍:android每日绝对干货

在react项目中使用redux or mobx?

2017-12-01 15:13 azothaw
主要比较参数:
  • 库体积,打包项目体积

  • 开发体验

  • 性能对比

在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略有不同,这个也是造成redux和mobx各项参数不同的缘由之一。

mvc/mvvm和flux的对比


mvc设计图


flux设计图


如图可知,mvc在处理多数据和复杂业务是有一定局限性的,一个view层可能
会调用到无数个model层,当然解决这个问题的方法也是有的,我们可以将多
个model抽象成一个model,例如处理基础数据的model合成一个基础model,
但这样编写也会造成代码的冗余以及没必要的性能损耗。
flux对比mvc,代码结构更加简单、一目了然。action处理数据请求,然后将请
求dispatch到store中,这样设计也十分契合react单向数据流的概念。在本文提
到的两个框架redux和mobx也都是基于flux的设计概念,不同的是mobx在store
和view中处理数据是使用的双向绑定,如下图。


mobx设计图

双向绑定无疑会增加性能消耗,但是mobx在双向绑定的同时禁掉了react自身
的刷新,要知道react shouldupdate生命周期是性能优化的大头,mobx禁
掉了这个性能会直接大幅提升,但这个和双向绑定的性能消耗相比谁占用的性
能更高,让我们用数据比较。
库体积,打包项目体积

我选用了两个相似的项目,一个使用redux开发,一个mobx(之所以没用两个
框架把一个项目写两遍是因为我太懒了)。


mobx项目


表红的部分是抽出的lib和打包的js,一个是64.2k,一个是29.2k。


redux项目

这个项目redux lib是webpack手动打包的,没有像mobx项目用打包版本,
体积是43.2k,app.js由于比mobx项目多使用了一个svg库(32k),体积达
到了62.3k,减去多的一个库大概30.3k。

综上,redux比mobx打包体积略大,几乎可以忽略不记,但是lib包比mobx小
20k,所以这轮redux胜,ヾ(=^▽^=)ノ。

开发体验

  • 学习成本:mobx基本看一遍,看看demo就能上手写了;redux看两天,

    写了个练手demo才勉强会。

  • 开发效率:由于mobx是双向绑定的,开发的时候你会觉得mobx写的都是有

    效代码;redux写同一个功能会多写很多代码,代码逻辑绕啊绕。

  • 代码质量:redux直接写,不做react渲染优化是个大坑,但是react渲

    染优化又比较繁琐,可能还要添加第三方插件,增加不必要的代码量。

    mobx基本不做渲染优化,渲染更新,是否更新的生命周期都被禁用了,

    还优化个屁。。。。

综上 开发体验上mobx比redux领先太多。

性能对比 此次比较是redux项目已经优化,mobx项目未优化的情况下进行的,
mobx项目优化后会补坑

  • 初始渲染
    感官是mobx更快,但是实际....下面上图。下面两张图是初次渲染的图,

    明显mobx在内存占用上更大,我考虑的原因mobx和redux渲染部分都是靠

    的react,这部分差别不大,主要是mobx多了双向绑定导致最大内存数值很

    高。在布局和渲染方面mobx优势明显,主要得益于mobx禁用了react大部

    分的生命周期,很大程度的减少了刷新次数,这次用的redux项目已经是优

    化过了渲染次数的,但还是渲染这么多次不禁汗颜。javascript与事件这块

     没有做太多了解,待填坑。


redux性能图,最大大小133.69mb


mobx性能图,最大大小162mb

  • 内存稳定后测同样操作的性能。
    redux最大内存162,但渲染次数还是惊人。
    mobx内存最大290,唯一欣慰的是渲染次数比较少


redux性能图


mobx性能图

总结

优化过后的redux项目性能比较好,mobx暂时还没想到特别好的优化方案,
找到了会补坑;
框架体验,开发效率,学习成本方面mobx更好,希望优化过后的mobx性能
有所提升;
代码打包体积redux确实要小点,但是如果项目比较庞大,redux开发代码
会比mobx多不少,体积这方面基本可以忽略。

 
Android每日干货 更多文章 探索ES2015:箭头函数(Arrow Functions) 微信浏览器踩坑集锦 详解Object.defineProperty() 基于css选择器设计交互效果时的一些思考 CSS学习笔记(渐变色文本)
猜您喜欢 视频直播CDN系统架构简析及应用场景概述 成功技术领导者10条经验锤炼 如何优雅而科学地上外网?Openshift原来可以这样使用 谈谈个人价值及平台红利 “八一”建军90周年,向最可爱的中国军人致敬!