useMutationObserver

使用 MutationObserver MDN 检测 DOM 的更改

Usage

实时编辑器

function Demo() {
  const options = { attributes: true };
  const [width, setWidth] = useState(200);
  const [count, setCount] = useState(0);

  const ref = useRef<HTMLDivElement>(null);

  const stop = useMutationObserver(
    (mutationsList) => {
      mutationsList.forEach(() => setCount(c => c + 1));
    },
    ref,
    options,
  );

  useEffect(() => {
    setWidth(300);
  }, []);

  return (
    <div>
      <div
        ref={ref}
        style={{
          width,
          padding: 12,
          border: "1px solid #000",
          marginBottom: 8,
        }}
      >
        当前宽度：{width}
      </div>
      <button onClick={() => setWidth(w => w + 10)}>加宽</button>
      <button onClick={() => stop()}>停止观察</button>
      <p>变更次数 {count}</p>
    </div>
  );
};

结果

当前宽度：300

变更次数 1

API

UseMutationObserver

Returns

() => void: 停止函数

Arguments

参数名	描述	类型	默认值
callback	回调	MutationCallback (必填)	-
target	dom元素	BasicTarget (必填)	-
options	传递给 MutationObserver 的参数	MutationObserverInit | undefined	-

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;