53 lines
2.5 KiB
Plaintext
53 lines
2.5 KiB
Plaintext
// 业务对象与出现位置生命周期分离：同一 child 在根中出现两次，每次都获得独立 Mount 和通知。
|
|
// 普通数据变化不会重新挂载；页面关闭时子项先卸载，父项随后卸载，旧 Mount 不因重开而复活。
|
|
// order 是统一时序，mounted/unmounted 是子项次数；latest 保存最近通知的实际 Mount。
|
|
class LifecycleLog {
|
|
order: Object
|
|
mounted: Object
|
|
unmounted: Object
|
|
parentMounted: Number
|
|
childMounted: Number
|
|
parentUnmounted: Number
|
|
childUnmounted: Number
|
|
latest: Object
|
|
}
|
|
// 共享文字用 log 记录两个出现位置，源钩子接收的是当前具体 Mount。
|
|
class WatchedText: TextBlock {
|
|
log: LifecycleLog
|
|
// 记录顺序和次数，保存 Mount 并修改原文字；运行时在回调后重新收敛才发布。
|
|
function onMount(self: WatchedText, mount: Mount): Unit {
|
|
self.log.order.increment()
|
|
self.log.mounted.increment()
|
|
self.log.childMounted = self.log.order.value
|
|
self.log.latest.set(mount)
|
|
self.setText("同一个对象，两个独立挂载位置")
|
|
}
|
|
// 记录已经脱离的出现位置；保留 Mount 可查询 mounted，但不能再当有效 bounds 使用。
|
|
function onUnmount(self: WatchedText, mount: Mount): Unit {
|
|
self.log.order.increment()
|
|
self.log.unmounted.increment()
|
|
self.log.childUnmounted = self.log.order.value
|
|
self.log.latest.set(mount)
|
|
}
|
|
}
|
|
// 父容器也记录钩子序号，便于对比挂载与子先父后的卸载顺序。
|
|
class WatchedColumn: Column {
|
|
log: LifecycleLog
|
|
// 记录父挂载顺序，不修改容器结构；子项随后各自执行通知。
|
|
function onMount(self: WatchedColumn, mount: Mount): Unit {
|
|
self.log.order.increment()
|
|
self.log.parentMounted = self.log.order.value
|
|
}
|
|
// 父卸载时子项卸载已完成，序列号应位于所有子项通知之后。
|
|
function onUnmount(self: WatchedColumn, mount: Mount): Unit {
|
|
self.log.order.increment()
|
|
self.log.parentUnmounted = self.log.order.value
|
|
}
|
|
}
|
|
// 多个 state 容器分别保存计数/最后 Mount，root 最后参数是源 log 字段，前面才是可变视觉子项。
|
|
log = LifecycleLog(ui.state(0), ui.state(0), ui.state(0), 0, 0, 0, 0, ui.state(0))
|
|
child = WatchedText("等待挂载", 2, log)
|
|
root = WatchedColumn(24, 16, child, child, TextBlock("挂载次数"), ui.textOf(log.mounted, "value"), TextBlock("卸载次数"), ui.textOf(log.unmounted, "value"), log)
|
|
page = Page()
|
|
page.render(root)
|