MobX

MobX

  • API 参考
  • English Doc
  • 赞助商
  • GitHub

›Tips & Tricks

Introduction

  • 关于 MobX
  • 关于本文档
  • 安装
  • MobX 主旨

MobX core

  • Observable state
  • Actions
  • Computeds
  • Reactions {🚀}

MobX and React

  • 集成React(react-integration)
  • React 优化 {🚀}

Tips & Tricks

  • 定义数据存储
  • 理解响应性
  • 使用子类
  • 分析响应性 {🚀}
  • 含参数的计算值 {🚀}
  • MobX-utils {🚀}
  • 自定义 observables {🚀}
  • 惰性 observables {🚀}
  • 集合工具 {🚀}
  • 拦截与观察 {🚀}

Fine-tuning

  • 配置 {🚀}
  • 启用装饰器语法 {🚀}
  • 从MobX 4/5迁移 {🚀}

Others

  • 链接
Edit

分析响应性 {🚀}

使用 trace 进行调试

trace 是一个可以帮你发现 computed, reaction 或 component 为什么会重新计算的小工具。

通过 import { trace } from "mobx" 导入 trace,然后在 computed 或 reaction 函数内部调用它,它就会打印出当前派生值为什么会重新计算。

你也可以选择把 true 作为最后一个参数传入 trace 从而自动进入调试模式。这样以来引起 reaction 重新计算的那个变动就还会停留在调用栈中,通常处于往上大约 8 个栈帧的位置,请看下图。

在调试模式中,调试信息中会展示出影响当前 computation 或 reaction 的完整的派生树。

trace

trace

在线示例

CodeSandbox trace 示例

这个部署在 now.sh 上的例子 可以用来研究调用堆栈,请务必尝试一下 Chrome 调试器的 blackbox 特性! 【译者注:该示例已经失效,此处提到的 Chrome 调试器的 blackbox 现已更名为 Ignore List,可以在调试时跳过某些库,让调试更有效率】

用法示例

trace() 有几种用法,下面是些例子:

import { observer } from "mobx-react"
import { trace } from "mobx"

const MyComponent = observer(() => {
    trace(true) // 当某个可监听值发生变化导致组件重新运行时进入调试模式
    return <div>{this.props.user.name}</name>
})

通过 reaction 或 autorun 函数的参数 reaction 来启用 trace:

mobx.autorun("logger", reaction => {
    reaction.trace()
    console.log(user.fullname)
})

在 trace 函数中传入对象和它的 computed 属性名:

trace(user, "fullname")

内部检查 API

如果你在调试时想检查 Mobx 的内部状态,或基于 Mobx 实现一些很酷的工具,下面的这些方法就会派上用场。还有各种相关的isObservable* API.

getDebugName

用法:

  • getDebugName(thing, property?)

为可监听对象,属性,reaction等返回一个(生成的)便于调试的名字。比如,这个方法就被 MobX 开发者工具所使用。

getDependencyTree

用法:

  • getDependencyTree(thing, property?).

返回指定 reaction 或 computation 当前所依赖的所有可监听值所组成的树结构。

getObserverTree

用法:

  • getObserverTree(thing, property?).

返回正在监听指定可监听对象的所有 reaction 和 所组成的树结构。

getAtom

用法:

  • getAtom(thing, property?).

返回指定可监听对象,属性或 reaction 背后的 Atom.

Spy

用法:

  • spy(listener)

注册一个全局的 spy 监听器来监听 Mobx 里发生的所有事件,相当于一次性给所有可监听对象添加了 observe 监听器,但也会通知到运行着的 transaction, reaction 和 computation。 比如,这个方法就被 MobX 开发者工具所使用。

这是一个监视所有 action 的例子:

spy(event => {
    if (event.type === "action") {
        console.log(`${event.name} with args: ${event.arguments}`)
    }
})

spy监听器始终接收一个对象,这个对象一般至少带有一个type字段。下面的事件都是 spy 默认触发的:

类型可监听类型其他字段是否嵌套
actionname, object (scope), arguments[]yes
scheduled-reactionnameno
reactionnameyes
errorname, message, errorno
add,update,remove,delete,splice参考 Intercept & observe {🚀}yes
report-endspyReportEnd=true, time? (毫秒单位的总执行时间)no

report-end 事件是一个先前触发的、带有 spyReportStart: true 属性的事件的一部分,这个事件表示一个事件的结束,而这样一来,几个由若干子事件组成的事件组就被创建出来了。这个事件也可能会报告总执行时间。

可监听值的 spy 事件和传递给 observe 的事件相同。在 Mobx 的生产版本中,spy API 会在压缩过程中被删除,因而变成一个 no-op 语句。

更多信息请参考 Intercept & observe {🚀} 章节。

← 使用子类含参数的计算值 {🚀} →
  • 在线示例
  • 用法示例
    • getDebugName
    • getDependencyTree
    • getObserverTree
    • getAtom
MobX
Docs
About MobXThe gist of MobX
Community
GitHub discussions (NEW)Stack Overflow
More
Star