zoukankan      html  css  js  c++  java
  • 在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多不少,体积这方面基本可以忽略。

  • 相关阅读:
    Qbxt 模拟题 day2(am) T2 jian
    Codevs 1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组
    洛谷比赛 U5442 买(最长链)
    洛谷 P1800 software_NOI导刊2010提高(06)(二分答案+DP检验)
    Codevs 4373 窗口(线段树 单调队列 st表)
    P1453 城市环路
    P1841 [JSOI2007]重要的城市
    P1410 子序列
    H
    GSS4 D
  • 原文地址:https://www.cnblogs.com/plBlog/p/11430249.html
Copyright © 2011-2022 走看看