react-mobx-2


observable

observable(value)
@observable classProperty = value

// 如果 value 是ES6 Map的实例: 会返回一个新的 Observable Map。不只关注某个特定entry的更改,而且对更改添加或删除其他entry时也做出反应。

// 如果 value 是数组,会返回一个 Observable Array。

// 如果 value 是没有原型的对象或它的原型是 Object.prototype,那么对象会被克隆并且所有的属性都会被转换成可观察的。

// 如果 value 是有原型的对象,JavaSript 原始数据类型或者函数,值不会发生变化。如果你需要 Boxed Observable:

1, 显式地调用 observable.box(value) 
// observable.box(value, options?),
// 使用 get() 方法可以得到盒子中的当前value,而使用 set() 方法可以更新value
// 使用 {deep: false} 选项会禁用新值被observable。
 
  
2, 在类定义时使用 @observable , // 是extendObservable(this, { property: value }) 的语法糖
3, 调用 decorate()
4, 在类中使用 extendObservable() 来引入属性
// 要想使用 @observable 装饰器,首先要确保编译器(babel 或者 typescript)中 装饰器是启用的。

// 默认情况下将一个数据结构转换成可观察的是有感染性的,这意味着 observable 被自动应用于数据结构包含的任何值,或者将来会被该数据结构包含的值。这个行为可以通过使用 装饰器 来更改
// 为提供的对象创建一个克隆并将其所有的属性转换成 observable
// 使用 {deep: false} 选项时只有属性会转换成 observable 引用,而值不会改变(这也适用于将来分配的任何值)。
observable.object(value, decorators?, options?)

observable.array(value, options?)
// 基于提供的值来创建一个新的 observable 数组。

observable.map(value, options?)
// 基于提供的值来创建一个新的 observable 映射 创建动态的键集合并且需要能观察到键的添加和移除,可以自由使用任何键而无需局限于字符串。
extendObservable(target, properties, decorators?, options?)
// extendObservable 增强了现有的对象,不像 observable.object 是创建一个新对象

// 如果新的属性不应该具备感染性,extendObservable(target, props, decorators?, {deep: false})


装饰器(Decorators)

observable.deep: 
// 所有 observable 都使用的默认的装饰器。它可以把任何指定的、非原始数据类型的、非 observable 的值转换成 observable。

observable.ref: 
// 禁用自动的 observable 转换,只是创建一个 observable 引用。

observable.shallow: 
// 只能与集合组合使用。 将任何分配的集合转换为浅 observable (而不是深 observable)的集合。 换句话说, 集合中的值将不会自动变为 observable。

computed: 
// 创建一个衍生属性

action: 
// 创建一个动作

猜你喜欢

转载自www.cnblogs.com/avidya/p/11654052.html