分析反應性 {🚀}
使用 `trace` 進行除錯
Trace 是一個小型工具,可幫助您找出計算值、反應或組件重新評估的原因。
它可以通過簡單地導入 `import { trace } from "mobx"`,然後將其放入反應或計算值中來使用。它將會印出它重新評估當前衍生值的原因。
或者,可以通過傳遞 `true` 作為最後一個參數來自動進入除錯器。這樣,導致反應重新執行的確切變異仍將在堆疊中,通常在堆疊向上約 8 個框架。請參考下圖。
在除錯器模式下,除錯資訊還會顯示影響當前計算/反應的完整衍生樹。
實際範例
這是一個已部署的範例,用於探索堆疊。請務必嘗試使用 Chrome 除錯器的黑盒功能!
用法範例
呼叫 `trace()` 有幾種不同的方式,以下是一些範例
import { observer } from "mobx-react"
import { trace } from "mobx"
const MyComponent = observer(() => {
trace(true) // Enter the debugger whenever an observable value causes this component to re-run.
return <div>{this.props.user.name}</name>
})
使用反應/ autorun 的 `reaction` 參數啟用追蹤
mobx.autorun("logger", reaction => {
reaction.trace()
console.log(user.fullname)
})
傳入計算屬性的屬性名稱
trace(user, "fullname")
自省 API
如果您想在除錯時檢查 MobX 的內部狀態,或者想在 MobX 之上構建酷炫的工具,以下 API 可能會派上用場。各種 `isObservable*` API 也與此相關。
`getDebugName`
用法
getDebugName(thing, property?)
返回可觀察物件、屬性、反應等的(生成的)友好除錯名稱。例如,MobX 開發者工具 使用它。
`getDependencyTree`
用法
getDependencyTree(thing, property?)
.
返回樹狀結構,其中包含給定反應/計算當前依賴的所有可觀察物件。
`getObserverTree`
用法
getObserverTree(thing, property?)
.
返回樹狀結構,其中包含正在觀察給定可觀察物件的所有反應/計算。
`getAtom`
用法
getAtom(thing, property?)
.
返回給定可觀察物件、屬性、反應等的支持 *Atom*。
間諜 (Spy)
用法
spy(listener)
註冊一個全域間諜監聽器,監聽 MobX 中發生的所有事件。它類似於將 `observe` 監聽器一次附加到*所有*可觀察物件,但也通知正在執行的(事務/重新)動作和計算。例如,MobX 開發者工具 使用它。
監視所有動作的範例用法
spy(event => {
if (event.type === "action") {
console.log(`${event.name} with args: ${event.arguments}`)
}
})
間諜監聽器始終接收一個物件,該物件通常至少具有一個 `type` 欄位。間諜預設會發出以下事件
類型 | 可觀察類型 | 其他欄位 | 巢狀 |
---|---|---|---|
動作 | 名稱、物件(範圍)、參數[] | 是 | |
排程反應 | 名稱 | 否 | |
反應 | 名稱 | 是 | |
錯誤 | 名稱、訊息、錯誤 | 否 | |
新增、更新、移除、刪除、拼接 | 查看 攔截與觀察 {🚀} | 是 | |
報告結束 | spyReportEnd=true,時間?(總執行時間,以毫秒為單位) | 否 |
`report-end` 事件是先前觸發的、具有 `spyReportStart: true` 的事件的一部分。此事件表示事件的結束,並以此方式創建具有子事件的事件組。此事件也可能會報告總執行時間。
可觀察值的間諜事件與傳遞給 `observe` 的事件相同。在正式版建置中,`spy` API 是無操作的,因為它會被最小化掉。
查看 攔截與觀察 {🚀} 章節以獲得更全面的概述。