谈谈 Redux 与 Mobx 思想的适用场景
谈谈 Redux 与 Mobx 思想的适用场景
Redux 和 Mobx 都是当下比较火热的数据流模型,一个背靠函数式,似乎成为了开源界标配,一个基于面向对象,低调的前行。
函数式 vs 面向对象
首先任何避开业务场景的技术选型都是耍流氓,我先耍一下流氓,首先函数式的优势,比如:
- 无副作用,可时间回溯,适合并发。
- 数据流变换处理很拿手,比如 rxjs。
- 对于复杂数据逻辑、科学计算维的开发和维护效率更高。
当然,连原子都是由带正电的原子核,与带负电的电子组成的,几乎任何事务都没有绝对的好坏,面向对象也存在很多优势,比如:
- javascript 的鸭子类型,表明它基于对象,不适合完全函数式表达。
- 数学思维和数据处理适合用函数式,技术是为业务服务的,而业务模型适合用面向对象。
- 业务开发和做研究不同,逻辑严谨的函数式相当完美,但别指望每个程序员都愿意消耗大量脑细胞解决日常业务问题。
Redux vs Mobx
那么具体到这两种模型,又有一些特定的优缺点呈现出来,先谈谈 Redux 的优势:
- 数据流流动很自然,因为任何 dispatch 都会导致广播,需要依据对象引用是否变化来控制更新粒度。
- 如果充分利用时间回溯的特征,可以增强业务的可预测性与错误定位能力。
- 时间回溯代价很高,因为每次都要更新引用,除非增加代码复杂度,或使用 immutable。
- 时间回溯的另一个代价是 action 与 reducer 完全脱节,数据流过程需要自行脑补。原因是可回溯必然不能保证引用关系。
- 引入中间件,其实主要为了解决异步带来的副作用,业务逻辑或多或少参杂着 magic。
- 但是灵活利用中间件,可以通过约定完成许多复杂的工作。
- 对 typescript 支持困难。
Mobx:
- 数据流流动不自然,只有用到的数据才会引发绑定,局部精确更新,但免去了粒度控制烦恼。
- 没有时间回溯能力,因为数据只有一份引用。
- 自始至终一份引用,不需要 immutable,也没有复制对象的额外开销。
- 没有这样的烦恼,数据流动由函数调用一气呵成,便于调试。
- 业务开发不是脑力活,而是体力活,少一些 magic,多一些效率。
- 由于没有 magic,所以没有中间件机制,没法通过 magic 加快工作效率(这里 magic 是指 action 分发到 reducer 的过程)。
- 完美支持 typescript。
到底如何选择
从目前经验来看,我建议前端数据流不太复杂的情况,使用 Mobx,因为更加清晰,也便于维护;如果前端数据流极度复杂,建议谨慎使用 Redux,通过中间件减缓巨大业务复杂度,但还是要做到对开发人员尽量透明,如果可以建议使用 typescript 辅助。
谈谈 Redux 与 Mobx 思想的适用场景的更多相关文章
- redux和mobx比较(一)
Redux vs Mobx 那么具体到这两种模型,又有一些特定的优缺点呈现出来,先谈谈 Redux 的优势: 数据流流动很自然,因为任何 dispatch 都会导致广播,需要依据对象引用是否变化来控制 ...
- 【译】Redux 还是 Mobx,让我来解决你的困惑!
原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用了 Redux,但我最近都在使用 Mob ...
- redux VS mobx (装饰器配合使用)
前言:redux和mobx都是状态管理器,避免父级到子级再到子子级嵌套单向数据流,可以逻辑清晰的管理更新共享数据.(刷新页面redux储蓄数据即消失) 配置使用装饰器(使用高阶函数包装你的组件): n ...
- redux和mobx比较(二)
Redux Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 三大核心 在 Redux 中,最为核心的概念就是 action .reducer.store 以及 state,那 ...
- 在react项目中使用redux or mobx?
主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...
- redux和mobx入门使用
redux和mobx入门使用 项目涉及技术 公共插件 create-react-app react-dom react-router react-router-dom react-hook redux ...
- vuex、redux、mobx 对比
出处:https://www.w3cplus.com/javascript/talk-about-front-end-state-management.html 其实大部分概念都差不多,只不过VUEX ...
- ElasticSearch所使用的倒排索引的思想和使用场景
背景: 在关系数据库系统里,索引是检索数据最有效率的方式,.但对于搜索引擎,它并不能满足其特殊要求: 1)海量数据:搜索引擎面对的是海量数据,像Google,百度这样大型的商业搜索引擎索引都是亿级甚至 ...
- Redux 和 mobx的区别
Redux: Redux将数据保存在单一store中,Mobx将数据保存在分散的多个store中 Redux需要手动处理变化后的操作,Mobx使用observable保存数据,数据变化后自动处理响应的 ...
随机推荐
- 冒泡排序——JavaScript实现
解析:1.比较相邻的两个元素,如果前一个比后一个大,则交换位置. 2.第一轮的时候最后一个元素应该是最大的一个. 3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所 ...
- mysql-5.7.17-winx64 的安装配置
在Mysql中下载 解压后,没有安装,需要设置环境变量,设置my.ini配置 设置环境变量 操作如下: 1)右键单击我的电脑->属性->高级系统设置(高级)->环境变量 点 ...
- h5页面关于复制某段文字
上次的项目有一段内容是点击复制按钮 然后复制一段文字,此段方法我才用的是range.selectNodeContents方法,range对象的SelectNodeContents方法将于range对象 ...
- ubuntu18.04修改ssh登录欢迎信息
1.编辑文件 ll /etc/update-motd.d/* 2.修改文件 3.查询效果 run-parts /etc/update-motd.d
- promise和生成器的结合
if(Promise.wrap){ Promise.wrap = function(fn){ return function(){ var args = [].slice.call(arguments ...
- SpringCloud-分布式配置中心(基于SpringBoot2.X)
一.配置中心的作用:可以将多种应用的配置进行集中式的管理,将这些配置统一存放到git或svn里面存储: 二.搭建SpringCloud-Config-Server 2.1如图后续步骤勾选Config ...
- 多线程.Thread.Sleep方法
多线程执行中,调用Thread.Sleep()方法 分情况: 1. 单核的情况下 是把当前正在工作的主线程停止(也就是从把线程变成非工作线程). 其他需要工作的线程来争夺CPU这个闲下来的核.谁争夺到 ...
- MyBatis配置C3P0连接池
一.导包 c3p0包 mybatis包 数据库的连接包 二.继承UnpooledDataSourceFactory的类 Mybatis 没有帮开发者实现 c3p0 数据库连接池,故需要使用者自 ...
- Linux-3.0.8中基于S5PV210的GPIO模块代码追踪和分析
编写按键驱动时,想知道内核是如何管理GPIO的,所以开始追踪代码,中间走了一些弯路,现记录于此. 追踪代码之前,我猜测:第一,这部分代码应该在系统set up阶段执行:第二,GPIO的代码应该在mac ...
- Android逆向之smali学习
Smali是Android虚拟机Dalvik反汇编的结果. Dalvik指令集 指令格式为:[op]-[type](可选)/[位宽,默认4位] [目标寄存器],[源寄存器](可选) 赋值:move* ...