在react项目中使用redux or mobx?

主要比较参数:
  • 库体积,打包项目体积
  • 开发体验
  • 性能对比

在对比参数前首先分析一下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多不少,体积这方面基本可以忽略。

原文地址:https://www.cnblogs.com/plBlog/p/11430249.html