mobx的学习笔记

一、定义 mobx通过透明的函数响应式编程,使得状态管理变得简单和可扩展:
任何源于应用状态的东西都应该自动地获得。(其中包括UI、数据序列化、服务器通讯等等)
React和Mobx是一对强力组合。
React和Mobx都提供了最优和独特的解决方案。React提供了优化UI渲染的机制,这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。Mobx提供了优化应用状态与React组件同步的机制,这种机制就是使用响应式虚拟依赖状态图表,它只有在真正需要的时候才更新并且永远保持最新。
二、observable 可观察的状态 mobx为现有的数据结构添加可观察的功能时,通过使用@observable装饰器来给你的类属性添加注释就可以简单地完成。

import { observable } frorm 'mobx'; class Todo { id = Math.random(); @observable title = ""; @observable finitshed = false; }

使用observable很像把对象的属性变成excel的单元格,但和单元格不同的是,这些值不只是原始值,还可以是引用值,比如对象和数组。
如果你的环境不支持装饰器语法,也不必担心,mobx可以通过decorate工具在不支持装饰器语法的情况下使用。(但是多数mobx用户更喜欢装饰器语法,因为更简洁)
例如上面那段代码,ES5的版本应该是:
import { decorate, observable } from "mobx"; class Todo { id = Math.random(); title = ""; finished = false; }decorate(Todo, { title: observable, finished: observable })

三、computed 计算值 使用mobx,你可以定义在相关数据发生变化时自动更新的值。通过@computed装饰器或者利用(extend)Observable时调用的getter / setter函数来进行使用。
class Todo { @observable todos = []; @computed get unfinishedTodoCount() { return this.todos.filter(todo => !todo.finished).length; } }

mobx会对在执行跟踪函数期间读取的任何现有的可观察属性做出反应。
四、优点
  • 简单且可扩展
    Mobx是状态管理库中侵入性最小的之一。这使得mobx的方法不但简单,而且可扩展性也非常好。
  • 使用类和真正的引用
    使用mobx不需要使用数据标准化。这使得十分适合那些异常复杂的领域模型。
  • 保证参照完整性
    因为数据不需要标准化,所以mobx会自动跟踪状态和衍生之间的关系。
  • 更简单的actions更便于维护
    使用mobx修改状态是非常简单的,你只需要简单的写出你的目的,mobx会替你处理好剩下的事情。
  • 细粒度的可观测性是高效的
    mobx构建应用中所有衍生的图形,以找到保持最新状态所需的重新计算的最少次数。“衍生一切”或许听上去开销很昂贵,但mobx构建虚拟衍生图保持衍生于状态同步所需的冲计算的数量最小化。
【mobx的学习笔记】简单来说,是因为mobx会在数据上建立更细粒度的"监听器",而不是通过程序来控制。
其次,mobx看到衍生之间的因果关系。因此它可以为衍生排序,使得衍生不会运行多次或引入缺陷。

    推荐阅读