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(追踪)