react-dx

内部变化触发 onUpdate 演示

操作按钮：

主容器 (.watch-container)

这个容器被监听，内部的任何 DOM 变化都会触发 onUpdate

初始子元素

事件日志:

暂无日志...

测试重点:
  • 动态容器的 onUpdate: 新添加的容器也能正确响应内部变化
  • 各种变化类型: 子元素增删、嵌套元素、文本节点、属性修改
  • 生命周期完整性: onMount → onUpdate → onUnmount 的完整流程
  • 观察器自动管理: 每个容器都有独立的 onUpdate 观察器
Internal Changes
演示内部变化触发 onUpdate 的完整方案

简化实现方案演示

主容器

初始子元素

事件日志:

暂无日志...

新方案特点:
  • 清晰的职责分离: document 观察器负责 onMount/onUnmount，元素观察器负责 onUpdate
  • 简化的状态管理: 只管理需要 onUnmount 的元素
  • 独立的元素观察: 每个匹配元素有自己的 onUpdate 观察器
  • 自动处理新增元素: 新增的匹配元素会自动触发 onMount
Basic
演示 useElementsMutationObserver 的基本用法