谈谈 Redux 与 Mobx 思想的适用场景

Redux 和 Mobx 都是当下比较火热的数据流模型,一个背靠函数式,似乎成为了开源界标配,一个基于面向对象,低调的前行。

函数式 vs 面向对象

首先任何避开业务场景的技术选型都是耍流氓,我先耍一下流氓,首先函数式的优势,比如:

  1. 无副作用,可时间回溯,适合并发。
  2. 数据流变换处理很拿手,比如 rxjs。
  3. 对于复杂数据逻辑、科学计算维的开发和维护效率更高。

当然,连原子都是由带正电的原子核,与带负电的电子组成的,几乎任何事务都没有绝对的好坏,面向对象也存在很多优势,比如:

  1. javascript 的鸭子类型,表明它基于对象,不适合完全函数式表达。
  2. 数学思维和数据处理适合用函数式,技术是为业务服务的,而业务模型适合用面向对象。
  3. 业务开发和做研究不同,逻辑严谨的函数式相当完美,但别指望每个程序员都愿意消耗大量脑细胞解决日常业务问题。

Redux vs Mobx

那么具体到这两种模型,又有一些特定的优缺点呈现出来,先谈谈 Redux 的优势:

  1. 数据流流动很自然,因为任何 dispatch 都会导致广播,需要依据对象引用是否变化来控制更新粒度。
  2. 如果充分利用时间回溯的特征,可以增强业务的可预测性与错误定位能力。
  3. 时间回溯代价很高,因为每次都要更新引用,除非增加代码复杂度,或使用 immutable。
  4. 时间回溯的另一个代价是 action 与 reducer 完全脱节,数据流过程需要自行脑补。原因是可回溯必然不能保证引用关系。
  5. 引入中间件,其实主要为了解决异步带来的副作用,业务逻辑或多或少参杂着 magic。
  6. 但是灵活利用中间件,可以通过约定完成许多复杂的工作。
  7. 对 typescript 支持困难。

Mobx:

  1. 数据流流动不自然,只有用到的数据才会引发绑定,局部精确更新,但免去了粒度控制烦恼。
  2. 没有时间回溯能力,因为数据只有一份引用。
  3. 自始至终一份引用,不需要 immutable,也没有复制对象的额外开销。
  4. 没有这样的烦恼,数据流动由函数调用一气呵成,便于调试。
  5. 业务开发不是脑力活,而是体力活,少一些 magic,多一些效率。
  6. 由于没有 magic,所以没有中间件机制,没法通过 magic 加快工作效率(这里 magic 是指 action 分发到 reducer 的过程)。
  7. 完美支持 typescript。

到底如何选择

从目前经验来看,我建议前端数据流不太复杂的情况,使用 Mobx,因为更加清晰,也便于维护;如果前端数据流极度复杂,建议谨慎使用 Redux,通过中间件减缓巨大业务复杂度,但还是要做到对开发人员尽量透明,如果可以建议使用 typescript 辅助。

谈谈 Redux 与 Mobx 思想的适用场景的更多相关文章

  1. redux和mobx比较(一)

    Redux vs Mobx 那么具体到这两种模型,又有一些特定的优缺点呈现出来,先谈谈 Redux 的优势: 数据流流动很自然,因为任何 dispatch 都会导致广播,需要依据对象引用是否变化来控制 ...

  2. 【译】Redux 还是 Mobx,让我来解决你的困惑!

    原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用了 Redux,但我最近都在使用 Mob ...

  3. redux VS mobx (装饰器配合使用)

    前言:redux和mobx都是状态管理器,避免父级到子级再到子子级嵌套单向数据流,可以逻辑清晰的管理更新共享数据.(刷新页面redux储蓄数据即消失) 配置使用装饰器(使用高阶函数包装你的组件): n ...

  4. redux和mobx比较(二)

    Redux Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 三大核心 在 Redux 中,最为核心的概念就是 action .reducer.store 以及 state,那 ...

  5. 在react项目中使用redux or mobx?

    主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...

  6. redux和mobx入门使用

    redux和mobx入门使用 项目涉及技术 公共插件 create-react-app react-dom react-router react-router-dom react-hook redux ...

  7. vuex、redux、mobx 对比

    出处:https://www.w3cplus.com/javascript/talk-about-front-end-state-management.html 其实大部分概念都差不多,只不过VUEX ...

  8. ElasticSearch所使用的倒排索引的思想和使用场景

    背景: 在关系数据库系统里,索引是检索数据最有效率的方式,.但对于搜索引擎,它并不能满足其特殊要求: 1)海量数据:搜索引擎面对的是海量数据,像Google,百度这样大型的商业搜索引擎索引都是亿级甚至 ...

  9. Redux 和 mobx的区别

    Redux: Redux将数据保存在单一store中,Mobx将数据保存在分散的多个store中 Redux需要手动处理变化后的操作,Mobx使用observable保存数据,数据变化后自动处理响应的 ...

随机推荐

  1. LD的-rpath,-rpath-link

    http://blog.chinaunix.net/uid-24709751-id-3563351.html http://songzhangzhang.blog.163.com/blog/stati ...

  2. Html与CSS学习书单

    1.Head First HTML与CSS(第二版) 豆瓣详情 这本书非常适合入门学习HTML与CSS它的内容不一定详实,但一定是你入门的首选.作为一本引进 图书翻译尚可.目前豆瓣评分9.3.

  3. kbmmw 5.08 正式发布

    欢迎大家围观. Important notes (changes that may break existing code)         ============================= ...

  4. Python类——面向对象

    一.有关面向对象的一些知识 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” ...

  5. 《Linux就该这么学》第十四天课程

    samba服务的配置文件解读 samba服务解决了Linux系统与Windows系统之间的文件共享问题,是一个非常不错的服务 原创地址:https://www.linuxprobe.com/chapt ...

  6. 2019.03.28 bzoj3597: [Scoi2014]方伯伯运椰子(01分数规划)

    传送门 题意咕咕咕有点麻烦不想写 思路: 考虑加了多少一定要压缩多少,这样可以改造边. 于是可以通过分数规划+spfaspfaspfa解决. 代码: #include<bits/stdc++.h ...

  7. 使用idea搭建maven-web项目

    使用idea搭建maven-web项目 1.用idea搭建项目:File--new--project 2.选择jdk版本,选择Maven-archetype-webapp来创建maven-web项目如 ...

  8. 20155205 郝博雅 Exp5 MSF基础应用

    20155205 郝博雅 Exp5 MSF基础应用 一.实验目标 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,如ms08_0 ...

  9. Vim常用的命令

    Noted:均在命令模式下进行的 移动: j---->向下 k---->向上 l---->向右 h---->向左 保存: w---->保存 退出: q---->退出 ...

  10. eclipse设置新建jsp文件默认字符编码为utf-8

    在使用Eclipse开发中,编码默认是ISO-8859-1,不支持中文.这样我们每次新建文件都要手动修改编码,非常麻烦.其实我们可以设置文件默认编码,今后再新建文件时就不用修改编码了. 1.打开Ecl ...