mobx

概念

用于自动化管理应用状态的状态管理器

对象跟踪

可观察对象以及相应的转换

直接返回可观察的对象

Map

set

将返回一个新的可观察的set结构

array

将返回一个新的可观察的array结构

mobx会返回一个新的Observables Map.这种结构可以让reat对特定条目的更改,或者条目的添加或者删除不做出反应。

对象

没有原型的对象

它的全部属性将被可观察

有原型,javascript原语或者函数,则将抛出observable,如果要创立对如果要创建对此类值的独立可观察引用,请改用Boxed Observable observables。MobX不会自动观察带有原型的对象;因为这被认为是其构造函数的职责。
在构造函数中使用extendObservable,或在其类定义中使用@observable / decorate。

内建函数

intercepr

observe

clear()

replace()

find()

findIndex()

remove()

内置函数

has(key)

set(key, value)

delete(key)

get(key)

keys()

values()

entries()

forEach(callback:(value, key, map) => void, thisArg?)

clear()

size()

ES6中没有但mobx有的功能

toJS()

把可观察的Map结构转换回普通Map

toJSON()

返回一个浅的普通对象表示Map,深拷贝用mobx.toJS(map)

intercept(interceptor)

注册一个监听器,在map有任何改变的时候,都会抛出

observe(listener, fireImmediately?)

merge(values)

复制所有提供的对象给map,value将会成为一个普通对象,条目的数组或者字符串key的ES6Map

replace(values)

用提供的值去替换map映射的全部内容

api

observer components

when

简单说,就是包含呈现可观察组件的所有组件,如果不想把某个观察者标记为观察者,比如减少通用组件包之间的依赖,请确保仅将其传递给纯数据。比如将其装换成父组件中的纯数据,可以用toJs

computed

comparer

default

structural

shallow

identity

error报错

autorun

经常用于一些如果更改了其内部变量则进行运行的场景,与computed类似。但是不用进行包装对象,可以监听一些非包装对象的变量,常常用来解决bug.

when

click to edit

装饰器语法

常见api

可以直接被mobx转换的对象(array,object,map)

编写的api

array

用observable包裹可以成为可观察的对象,但是js的isArray已经无法判断,所以我们需要用mobx包里的isArrayLike进行判断,值得注意的是,经过转换的数组对象是可以进行很多数组类似操作的。

object

map

不是真正的map,但是操作很像map

其他类型

设置值

对于其他类型可以用observable.box进行包装,比如string类型或者number类型之类的,都会统一包装一种value类型,当我们需要取得原始类型时,可以用get()方法取得原始类型值

更改值

set()

computed

antorun

when

Reaction

作为普通函数对变化的数据进行监听

作为装饰器求出相应的值。

autorun接受一个函数,自动运行函数传入的参数

什么时候触发自动运行呢?当引用的值触发了修改的时候,自动执行传入autorun中函数

作用: 接受两个函数,当第一个函数返回true的时候,就执行第二个函数,保证只执行一次

注意点:第一个是第一个函数必须根据可观察数据来得到结果。不能是普通变量,然后如果本身为真就会立即执行。

接受两个函数参数,第一个函数返回的值作为第二个函数的参

常用场景,当我们在没有数据之前,我们不想调用写入缓存的逻辑

action

修饰函数

action.bound把上下文带入

常用工具函数

observe

不同于observable,他是用来监视被包裹的对象,但是粒度不高,可以监听数组但无法监听数组子元素。

spy

spy会对所有的更改进行监控。任何更新。

书写:spy(event => { console.log(event)}

toJS

可以将mobx对象转换成js的对象,使得我们可以放心的存储。

trance(追踪)