React中如何监听node.current.clientHeight的变化？

问题根因 #

原有代码不生效是因为：React useRef返回的ref对象的current属性仅在指向的DOM节点被整体替换时才会变更引用，DOM节点的内部属性（如clientHeight）变化不会修改current的引用值，因此useEffect依赖项未发生变化，不会触发执行。

最优实现方案 #

使用浏览器原生ResizeObserverAPI监听元素尺寸变化，该API会在元素尺寸变更时同步触发回调，无轮询的延迟与性能损耗。
完整实现代码如下：

import { useRef, useState, useEffect } from 'react';

function DemoComponent() {
  const [height, setHeight] = useState(0);
  const node = useRef(null);

  useEffect(() => {
    const target = node.current;
    if (!target) return;

    const observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        // 按需选择高度计算逻辑：contentRect.height为内容高度，clientHeight包含padding+border
        const newHeight = entry.contentRect.height;
        setHeight(newHeight);
      }
    });

    observer.observe(target);

    // 组件卸载时清理观测，避免内存泄漏
    return () => {
      observer.unobserve(target);
      observer.disconnect();
    };
  }, []);

  return (
    <div
      style={{ position: "absolute" }}
      ref={node}
    >
      {/* 组件内容 */}
    </div>
  );
}

补充说明 #

• 目前所有主流浏览器均原生支持ResizeObserver，如需兼容极低版本浏览器可引入对应polyfill
• 若div高度变化完全由你控制的React state驱动，也可将对应state加入原useEffect的依赖数组实现触发，ResizeObserver更适配内容异步加载、用户操作等不可控场景导致的高度变化

内容的提问来源于stack exchange，提问作者János