MobX API 参考

核心 API

MobX中最重要的API,理解observable, computed, reactions, actions就足够在我们的应用程序中使用MobX了!

创建observables

observable

  • observable(value)
  • @observable classProperty = value

Observable的值可以是JS元数据,引用,纯对象,类实例,数组和maps。

有如下转换规则,但是它们可以使用修饰符微调,我们往下看。

  1. 如果value是在asMap里面的,将会返回一个新的Observable Map。当你想指定一个特定条目改变时不触发响应,Observable maps是非常有用的,当然也报过条目的增加或删除。
  2. 如果value是一个数组,将会返回一个新的Observable Array
  3. 如果value是一个原型的对象,其当前含有的所有属性都会被观察。详见Observable Object
  4. 如果value包含原型,JS元数据或者方法,将会返回一个Boxed Observable。MobX不会自动的观察一个包含原型的对象,因为这是它的构造函数的责任。在构造函数中使用extendObservable,或者试用@observable修饰符在其类定义的时候取代。

这些规则第一眼看上去很复杂,但是在实际使用中,你会发现它们运作起来是非常直观的。

一些注意事项:

  • :(
  • 如果使用@overvable装饰器,要确保在你的编译器(babel 或 typescript)中启用装饰器语法
  • 默认创建一个可观察的数据结构是

extendObservable

用法: extendObservable(target, propertyMap) 对于propertyMap中的任何一个键/值对,目标对象上将会被引入一个新的observable属性。我们可以使用它在constructor构造函数引入observable属性取代decorators装饰器方法。如果propertyMap中的值为无参函数时,会被当做是一个computed属性。

Computed values

用法:

  • computed(() => expression)
  • @computed get classProperty() { return expression; }

创建一个computed属性。表达式expression应该返回一个值而不应该包含其它副作用。当任何被观察的变量改变时,表达式会自动重新运行计算,当然了只有它使用的reaction

Actions

任何应用都有actionsAction可以是修改State的任何东西。

使用Mobx,你可以在代码中显式的标记你的actionActions帮助你更好的组织你的代码。建议将它们用于修改可观察的变量或具有任何副作用的任何函数。action还提供了和开发工具组合使用时的调试信息。

注:如果启用严格模式,则必须使用action去操作State,详见useStrict

用法:

  • action(fn)
  • action(name, fn)
  • @action classMethod
  • @action(name) classMethod
  • @action boundClassMethod = (args) => { body }
  • @action(name) boundClassMethod = (args) => {body}

Reactions

Computed values是自动对状态变化响应计算的值,而Reactions是状态变化时的副作用。Reaction可用于确保在相关状态改变(如状态改变,日志记录,网络请求等)时自动的执行某些副作用(主要是I/O操作)。最常用的响应是React组件的observer装饰器(见下文)。

observer

可以作用在React组件周围的高阶语法。然后在组件的render函数中使用的任何被observable的变量变化时,组件就自动的重新渲染。注意observermobx-react包提供,而不是由mobx本身提供的

用法:

  • observer(React.createClass({ ... }))
  • observer((props, context) => ReactElement)
  • observer(class MyComponent extends React.Component { ... })
  • @observer class MyComponent extends React.Component { ... }

autorun

用法:autorun(debugname?, () => { sideEffect })Autorun会运行提供的sideEffect并且会跟踪副作用运行时使用的被观察的状态。任何一个使用的被观察的变量变化时,sideEffect都会被重新运行。其返回一个处理器函数以取消副作用。

when

用法:when(debugname?, () => condition, () => { sideEffect })。条件表达式在其使用的任何可观察的变量变化时会自动执行。一旦表达式返回true,sideEffect函数将被调用,但只调用一次。when会返回一个处理器函数以取消整个过程。

autorunAsync

用法:autorunAsync(debugname?, () => { sideEffect }, delay)。和autorun相似,但是sideEffect将被延迟执行以达到去抖目的。

reaction

用法:reaction(debugname?, () => data, data => { sideEffect }, fireImmediately = false, delay = 0)

Modifiers for observable


实用

Provider

inject

toJS

isObservable

isObservableObject|Array|Map

isAction

isComputed

createTransformer

intercept

observe

useStrict

开发实用工具

mobx-react-devtools

spy

whyRun

extras.getAtom

extras.getDebugName

extras.getDependencyTree

extras.getObserverTree

extras.isSpyEnabled

extras.spyReport

extras.spyReportStart

extras.spyReportEnd

mobx-react 开发钩子

内部方法

transaction

untracked

Atom

Reaction

extras.allowStateChanges

extras.resetGoobalState

可能会被废弃的方法

map

expr