useMutationObserver

作用

一个监听指定的 DOM 树发生变化的 Hook

原理

通过 MutationObserver 这个 API 来实现的。

源码

import { getTargetElement } from '../utils/domTarget'
import type { BasicTarget } from '../utils/domTarget'
import useDeepCompareEffectWithTarget from '../utils/useDeepCompareWithTarget'
import useLatest from '../useLatest'

const useMutationObserver = (
  callback: MutationCallback,
  target: BasicTarget,
  options: MutationObserverInit = {},
): void => {
  // 保存回调函数的引用
  const callbackRef = useLatest(callback)

  // 监听 DOM 树发生变化
  useDeepCompareEffectWithTarget(
    () => {
      // 获取目标元素
      const element = getTargetElement(target)
      // 如果目标元素不存在，则直接返回
      if (!element) {
        return
      }
      // 创建 MutationObserver 实例
      const observer = new MutationObserver(callbackRef.current)
      // 开始监听
      observer.observe(element, options)
      // 组件卸载时停止监听
      return () => {
        observer?.disconnect()
      }
    },
    [options],
    target,
  )
}

export default useMutationObserver