遇到的一些小坑

  • React组件内部想要调用store里的action方法,得如下图,否则不会调用(这个现在看来好像不对,待重新检验)

而不能如下图

  • 组件中调用改变store的action后,状态变化并不会立刻反应到组件中,而后面的代码却又依赖于这个状态变化

  1. 若后面的代码依赖于这个状态变化,可以通过setTiemout延迟后面代码的执行(不推荐)
  2. 继上,也可以考虑把后面依赖store变化的代码也移到action中去
  • 组件卸载时,store中的各值不会被清掉而继续保留

复用代码的一些小手段

  • 把公共的store存到一个CommonStore里,其他store extend它即可,如图

mobx可以对什么做出反应(mobx核心)

  • 必须得是Reaction或Derivations依赖的且必须是可观察属性的改变才会作出反应非依赖的可观察属性或所有非可观察属性变量的值的改变无影响

           如下图把可观察属性的值赋给另一个变量,这个变量仅仅是值的复制,是非可观察属性,对他的改变不会做出反应

  • 若@boservable装饰符加在一个指向对象的变量上,那么可观察属性一定是指这个根对象中的字段(而非字段对应的值),若一个根对象中嵌套多层对象,子对象所属于的字段和每个子对象包含的所有字段都会成为可观察属性,但代表根对象的那个变量不会成为可观察属性,所以对这个变量本身重新赋值,mobx不会做出反应
  • 若@boservable装饰符加在一个指向原生类型或数组的变量,那么这个变量就是可观察属性,直接改变整个数组mobx也会做出反应
  • 只是引用了根对象上的一个子对象(子对象是可观察属性)却不使用任何子对象上的属性,也不会使组件re-render,如图

  

  • 在写异步acting的回调函数中改变可观察属性的值也不会引起rerun

如何创建可随时动态反应的对象

  • 使用extendObservable工具函数(不推荐,有很多坑)

像下图mobx不会做出反应,因为autorun定义在调用extendObservable之前,想要做出反应,autorun需要定义在调用extendObservable之后才行

   

  • 使用observable 映射(推荐)

  • 使用{…obj, /*在这加新属性*/}这种方式改变对象(推荐)

几个月来使用mobx代替redux的一些总结的更多相关文章

  1. 你需要Mobx还是Redux?

    在过去一年,越来越多的项目继续或者开始使用React和Redux开发,这是目前前端业内很普遍的一种前端项目解决方案,但是随着开发项目越来越多,越来越多样化时,个人又有了不同的感受和想法.是不是因为已经 ...

  2. Mobx与Redux区别

    Mobx的实现思想和Vue几乎一样,所以其优点跟Vue也差不多:通过监听数据(对象.数组)的属性变化,可以通过直接在数据上更改就能触发UI的渲染,从而做到MVVM.响应式.上手成本低.开发效率高,在数 ...

  3. Mobx总结以及mobx和redux区别

    Mobx解决的问题 传统react使用的数据管理库为Redux.Redux要解决的问题是统一数据流,数据流完全可控并可追踪.要实现该目标,便需要进行相关的约束 Redux由此引出dispatch ac ...

  4. redux、immutablejs和mobx性能对比(三)

    四.我的结论 通过第三部分的数据数据分析,我觉得我们可以得到以下结论: 无论是在开发环境还是测试环下页面的首次加载速度结果都是:redux>immutablejs>mobx,但是他们之间的 ...

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

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

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

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

  7. Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案

    近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...

  8. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  9. mobx源码解读1

    mobx是redux的代替品,其本身就是一个很好的MVVM框架.因此花点力气研究一下它. 网上下最新的2.75 function Todo() { this.id = Math.random() mo ...

随机推荐

  1. spring中log4j的使用---转载

    原文链接:http://www.codeceo.com/article/log4j-usage.html 日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供 ...

  2. (转) RabbitMQ学习之发布/订阅(java)

    http://blog.csdn.net/zhu_tianwei/article/details/40887733 参考:http://blog.csdn.NET/lmj623565791/artic ...

  3. C# model代码生成器

    using System.Collections.Generic; using System.Text; public class Class1 { //传递 1.表名 2.列名 3.类型 publi ...

  4. vue项目布局

    1.底部有分类布局 类似这种底部有分类的,点击四个tap分别道不同的页面这样的,每个页面都是一个路由,把底部作为一个组件在每一个页面中引入就行.组件就是公用的,能公用的就写成组件.如下 { path: ...

  5. required输入框为必填项

    required <input type="text" placeholder="cat photo URL" required>

  6. Day 10 函数

    函数 1.什么是函数? 函数就是具备某一功能的工具,事先将工具准备好就是函数的定义,遇到应用场景拿来就用就是函数的调用 2.为何用函数? 如果不使用函数,写程序会遇到这三个问题 1.程序冗长 2.程序 ...

  7. centos7安装nginx(基础篇)

    安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...

  8. HDU 2522 A simple problem( 分数循环节 )

    链接:Here! 思路:模拟除法,当余数再次出现的时候一定是遇到了循环节( 可看下图例子 ),否则的话继续除法的步骤,直到被除数为 0 . 注意:这道题不需要重新申请一个数组来单独存放答案,如果符合要 ...

  9. N3-2 - 树 - binary-tree-level-order-traversal-ii

    题目描述: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, fro ...

  10. [luogu P2590 ZJOI2008] 树的统计 (树链剖分)

    题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...