动态监听DOM元素高度变化

在这看似简单的需求当中，其实涉及到了一个难点，那就是怎样动态的监听到内容区域的高度变化？

因为在这里面会含有图片资源，他们在渲染的时候会发起网络请求，等待图片加载完成后触发浏览器重排，该区域的高度被撑开。

因此，内容区域的高度是动态变化，且变化的时间点是未知的，那么怎样知道我们的内容区高度发生了变化呢？

为此我做了以下几种尝试：

2、MutationObserver

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。

observe(target, options)

这个方法会根据传入的 options 配置，观察 DOM 树中的单个 Node 或者所有的子孙节点的变化。

他一共有七个属性，这里就不一一介绍了，可以通过 MutationObserverInit 来获取相应的介绍.

那么我们要怎么使用这个 API 来监听目标区域的高度变化呢？

// useRef创建引用
const contentRef = useRef();

// 绑定ref
<div
  className="content"
  dangerouslySetInnerHTML={{ __html: details }}
  style={{ maxHeight }}
  ref={contentRef}
/>;

const [height, setHeight] = useState(-1);
const [observer, setObserver] = useState<MutationObserver>(null!);
useEffect(() => {
  const observer = new MutationObserver((mutationList) => {
    if (height !== contentRef.current?.clientHeight) {
      console.log("高度变化了！");
      setHeight(contentRef.current.clientHeight);
    }
  });
  setObserver(observer);
}, []);

useEffect(() => {
  if (!observer || !contentRef.current) return;
  observer.observe(contentRef.current, {
    childList: true, // 子节点的变动（新增、删除或者更改）
    attributes: true, // 属性的变动
    characterData: true, // 节点内容或节点文本的变动
    subtree: true, // 是否将观察器应用于该节点的所有后代节点
  });
}, [contentRef.current, observer]);

完整代码：

const Details = () => {
    // useRef创建引用
    const contentRef = useRef();
    const [height, setHeight] = useState(-1);
    const [observer, setObserver] = useState<MutationObserver>(null!);

    useEffect(() => {
          const observer = new MutationObserver((mutationList) => {
            if (height !== contentRef.current?.clientHeight) {
                console.log('高度变化了！');
                setHeight(contentRef.current.clientHeight);
            }
          });
          setObserver(observer);
    }, []);

    useEffect(() => {
          if (!observer || !contentRef.current) return
          observer.observe(contentRef, {
            childList: true, // 子节点的变动（新增、删除或者更改）
            attributes: true, // 属性的变动
            characterData: true, // 节点内容或节点文本的变动
            subtree: true// 是否将观察器应用于该节点的所有后代节点
          });
    }, [contentRef.current, observer]);

    // 绑定ref
    return<div className="content" dangerouslySetInnerHTML={{ __html: details }} style={{ maxHeight }} ref={contentRef} />
}

经过上面的一番操作之后，发现根本达不到效果，因为我们的 css 属性根本没有发生变化（我们是通过 maxHeight 来约束容器的高度的）, 但是资源加载完毕之后，浏览器重排根本没有产生 css 属性的变化，它的高度是自动计算的

因此这个方案无济于事！但是它确实可以监听到认为修改容器的高度产生的变化，比如：contentRef.current.style.height = '1000px'，这个 api 是可以监听到这一操作的，但是并不符合我们的场景

此外，它的浏览器兼容性也还行：

const [height, setHeight] = useState(-1);
const [showMore, setShowMore] = useState(false);
// contentRef 的定义见 MutationObserver 一节
useEffect(() => {
  const sources = contentRef.current.querySelectorAll("[src]");
  sources.onload = () => {
    const height = contentRef?.current?.clientHeight ?? 0;
    const show = height >= parseInt(MAX_HEIGHT, 10);

    setHeight(height);    setShowMore(show);
  };
}, []);

const Detail: FC<{}> = () => {
  const ref = useRef<HTMLDivElement>(null);
  const ifr = useRef<HTMLIFrameElement>(null);
  const [height, setHeight] = useState(-1);
  const [showMore, setShowMore] = useState(false);
  const [maxHeight, setMaxHeight] = useState(MAX_HEIGHT);
  const introduceInfo = useAppSelect(
    (state) => state.courseInfo?.data?.introduce_info ?? {}
  );
  const details = introduceInfo.details ?? "";
  const isFolded = maxHeight === MAX_HEIGHT;
  const onresize = useCallback(() => {
    const height = ref?.current?.clientHeight ?? 0;
    const show = height >= parseInt(MAX_HEIGHT, 10);

    setHeight(height);    setShowMore(show);
    if (ifr.current && show) {
      ifr.current.remove();
    }
  }, []);

  useEffect(() => {
    if (!ref.current || !ifr.current?.contentWindow) return;
    ifr.current.contentWindow.onresize = onresize;
    onresize();
  }, [details]);

  if (!details) returnnull;

  return (
    <section className="section detail-content">
      <div className="content-wrapper">
        <div
          className="content"
          dangerouslySetInnerHTML={{ __html: details }}
          style={{ maxHeight }}
          ref={ref}
        />
        {/* 这个iframe是用来动态监听content高度的变化的 */}
        <iframe title={IFRAME_ID} id={IFRAME_ID} ref={ifr} />
      </div>
      {isFolded && showMore && (
        <>
          <div
            className="show-more"
            onClick={() => {
              setMaxHeight(isFolded ? "none" : MAX_HEIGHT);
            }}
          >
            查看全部
            <IconArrowDown className="icon" />
          </div>
          <div className="mask" />
        </>
      )}
    </section>
  );
};