• 1. MobX 介绍
  • 1.1. MobX 要点
  • 1.2. 概念与原则
• 2. API概览
• 1. observable 相关
  • 3.1. observable
  • 3.2. @observable
  • 3.3. objects
  • 3.4. arrays
  • 3.5. maps
  • 3.6. boxed values
  • 3.7 decorators
• 1. 对 observables 作出响应
  • 4.1. (@)computed
  • 4.2. autorun
  • 4.3. when
  • 4.4. reaction
  • 4.5. (@)observer
  • 4.6. 理解 MobX 对何作出响应
• 1. 改变 observables
  • 5.1. action
  • 5.2. async actions & flows
  • 5.3. Object api
• 1. 工具函数
  • 6.1. toJS
  • 6.2. extendObservable
  • 6.3. createAtom
  • 6.4. intercept & observe
  • 6.5. mobxUtils.fromPromise
  • 6.6. mobxUtils.fromResource
  • 6.7. mobxUtils.toStream
  • 6.8. mobxUtils.fromStream
  • 6.9. mobxUtils.now
  • 6.10. mobxUtils.createTransformer
  • 6.11. mobxUtils.expr
  • 6.12. complete api overview
• 7. 博客、 视频及相关项目
• 1. 贴士与技巧
  • 8.1. 常见问题解答
  • 8.2. 常见陷阱与最佳实践
  • 8.3. 如何(不)使用装饰器
  • 8.4. 使用 trace 进行调试
  • 8.5. 定义数据存储
  • 8.6. 优化 React 组件
  • 8.7. 开发工具
  • 8.8. spy
• 9. 捐赠
• Published with GitBook

8.4. 使用 trace 进行调试

使用 trace 进行调试

trace 是一个小工具，它能帮助你查找为什么计算值、 reactions 或组件会重新计算。

可以通过简单导入 import { trace } from "mobx" 来使用它，然后将其放置在 reaction 或计算值中。 它会打印出当前衍生重新计算的原因。

可以通过传入 true 作为最后参数来自动地进入 debugger 。 这种方式使得导致 reaction 重新运行的确切变化仍然在堆栈中，通常是〜8个堆栈帧。参见下面的图片。

在 debugger 模式中，调试信息还回透露出影响当前计算或 reaction 的完整衍生树。

在线示例

在 codesandbox 演示的简单 trace 示例: https://codesandbox.io/s/nr58ylyn4m

这是一个用于探索堆栈的部署示例: https://csb-nr58ylyn4m-hontnuliaa.now.sh/ 务必要使用 chrome 调试器的黑魔法!

用法示例

调用 trace() 有几种方式，下面是一些示例:

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

@observer
class MyComponent extends React.Component {
    render() {
        trace(true) // 每当 observable 值引起这个组件重新运行时会进入 debugger
        return <div>{this.props.user.name}</name>
    }
}

通过使用 reaction 或 autorun 中 reaction 参数来启用 trace :

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

传入计算属性的名称:

trace(user, "fullname")

results matching ""

No results matching ""