使用mobx项目开发总结(不再更新)
mobx的优点
1,使用@observer的组件真正实现按需更新,只有监听的数据发生变化,它才会re-render,尽管父组件发生更新,但是子组件只要有@observer,则不会触发更新,类似于实现了shouldComponentUpdate的效果,而同样的场景,如果是redux,子组件通过connect绑定了store里部分数据,但是如果父组件发生更新,子组件绑定的数据源并未发生变化,因此子组件不应该更新,然而却强制更新。
mobx耦合性更低。
mobx的缺点
1,store过多导致无法统一数据源,在多人开发的情况下会比较混乱,如果需要公用某个store,唯有在特定组件注入该store,那如果有多个store里有多个数据源需要公用呢,那就要同时注入多个store,项目复杂了,store的管理又是一个问题。
2,mobx对于数组的处理,会将它转换成observableArray,它不是一个数组类型,需要进行数组转换(如slice)。
3,mobx在forceupdate时,并没有像setState那样处理多个更新合并的操作,这就带来个问题就是,在同一个event loop中,如果多次通过action去引起同一个观察者的更新,那么它就会连续更新多次,但是如果是setState,它会进行一次合并,不会有这种负担。(这里的解决方案就是人为的去控制,避免这种多次同时更新,可以将多个action手动合并为1个action);
4,对于某个公共组件,可能多个页面需要用到,但是组件内状态较多,并且不同页面,状态差异较多,此时如果用mobx的store来管理,会存在一个问题,组件虽然unmount了,但是store并未消失,导致需要手动reset store里所有的状态,否则会混乱
mobx的思想
将响应式编程和部分函数式编程相结合,取缔传统React的命令式编程,分而治之,将组件都变成可响应的,React提供了渲染的最优方式,通过对比虚拟DOM的diff算法来减少不必要的渲染耗费,而mobx则给React提供了响应式的状态管理。
关于mobx细粒度拆分
是否所有的state我都交给mobx来管理,其实类似于redux,只有当某个状态需要多个组件(这里默认为2个及以上)公用,则将该状态放到store里去监听,然后需要引用该状态的组件通过mobx-react的inject来进行监听。
关于mobx的优化
这里我参考redux的优化,将容器组件通过mobx-react来连接需要监听的store,然后展示组件就还是通过PureComponent来进行优化,避免重复re-render。这里其实有一点考虑是,我们可以利用@observer来对展示组件需要更新的状态进行一个监听,免去shouldComponentUpdate的步骤,但是如果多挂一层监听,性能未必更优,相当于要多处理一个监听器,所以还是减少监听的个数会好些。
为什么选择mobx而不是redux
这个标题不是为了贬低redux,而是解释为什么在某些项目环境中,我不使用redux,而是使用mobx,能否使用redux?可以,只不过mobx会更让开发者舒服一些。
项目场景分析:
(待续)
===============
2019.3.7更新
这篇随笔不会再更新了,有一篇更详细的讲解mobx以及和redux还有rxjs的对比,请移步至这里。
使用mobx项目开发总结(不再更新)的更多相关文章
- angular+ionic+cordova(实战项目开发中,持续更新自己学到的和遇到的)
最近公司开始准备做app了,大佬选择了angular+ionic+corvoda的开发结构,但是对于刚刚才开始对angular才有一点点感觉的我,就像是被一击闷棍敲了,半天没反应过来,emmm,怎么办 ...
- ubuntu开发项目不能执行热更新
当项目开发到一定成熟度,项目基本上比较大(vue,angular,react,java,php等),在Ubuntu系统环境下,我们写了代码,但是不能想Windows一样执行热更新,这是因为Ubuntu ...
- 从零开始学C#——不再更新,直接进入高阶教程
从零开始学习C#不再更新,直接进入高阶教程. 入门教程,请自行谷歌.百度吧,有很多这样的教程. 编程是一件实践性很强的事情,那么接下来的文章将开始进行开发项目. 还在编程中迷茫的人们,先暂时放下一切的 ...
- Android 实践项目开发 总结
Android 实践项目开发 总结 课程:移动平台应用开发实践 班级:201592 姓名:杨凤 学号:20159213 成绩:___________ 指导老师:娄嘉鹏 ...
- Web项目开发中用到的缓存技术
在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...
- 仿LOL项目开发第一天
---恢复内容开始--- 仿LOL项目开发第一天 by---草帽 项目源码研究群:539117825 最近看了一个类似LOL的源码,颇有心得,所以今天呢,我们就来自己开发一个类似于LOL的游戏demo ...
- 项目实战:BBS+Blog项目开发
01-博客系统之功能需求 02-博客系统之表结构设计1 03-博客系统之表结构设计2 04-博客系统之表结构设计3 05-博客系统之表结构设计4 06-博客系统之表机构设计5 07-博客系统之创建系统 ...
- Anytime项目开发记录0
Anytime,中文名:我很忙. 开发者:孤独的猫咪神. 这个项目会持续更新,直到我决定不再维护这个APP. 2014年3月10日:近日有事,暂时断更.希望可以会尽快完事. 2014年3月27日:很抱 ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
随机推荐
- (ZT)算法杂货铺——分类算法之朴素贝叶斯分类(Naive Bayesian classification)
https://www.cnblogs.com/leoo2sk/archive/2010/09/17/naive-bayesian-classifier.html 0.写在前面的话 我个人一直很喜欢算 ...
- lnmp环境部署脚本-y
系统环境:centos6.X #!/bin/bash#date:2018-01-01## MySQL 安装8版本的话不太适合,有待于添加安装脚本进行测试#新版的MySQL安装需要高版本2.8以上cma ...
- NTP时间服务
时间服务 NTP:Network Time Protocol 作用:用来给其他主机提供时间同步服务 NTP的配置文件 /etc/ntp.conf NTP相关的命令 date:显示/修改系统时间 hwc ...
- python中re正则表达式
1.re匹配的语法 re.math 从头开始匹配,没有匹配到返回None re.seach 匹配包含,,没有匹配到返回None re.findall 把所有匹配到的字符,以列表的形式返回,没有匹配到返 ...
- ThingJS平台制作第一人称视角下的巡更效果
今天想要做一个类似巡更的过程,就像是在学校保安巡更,小区保安巡更一样.巡更需要用到相应的场景,比如说:园区.学校.超市以及工厂等等,然后需要规划好路线也就是巡更的路线,并且视角要跟随路线来变换,从而达 ...
- mongodb安装使用简单命令
.window+x,A,管理员进入cmd.cd C:\Program Files\MongoDB\Server\3.4\bin.安装:mongod --dbpath "D:\work\DB\ ...
- 开源虚拟化KVM(一)搭建部署与概述
一,KVM概述 1.1 虚拟化概述 在计算机技术中,虚拟化意味着创建设备或资源的虚拟版本,如服务器,存储设备,网络或者操作系统等等 [x] 虚拟化技术分类: 系统虚拟化(我们主要讨论的反向) 存储虚拟 ...
- Python下划线简介
Python中下划线的5种含义 分享一篇文章:The Meaning of Underscores in Python. 本文介绍了Python中单下划线和双下划线("dunder" ...
- 含有Date属性的对象转化为Json
含有Date类型属性的对象,转化为Json,Date属性并不是时间戳格式. 解决方法: 使用Jackson的注解@JsonFormat,添加到对象属性上方即可. 我们的北京时间会相差8个小时,因为我们 ...
- Leetcode中sort排序遇到的一些问题
class Solution { public: static bool cmp(vector<int>a,vector<int>b) { ]-a[]<b[]-b[]; ...