React中如何优雅触发监听div尺寸变化的useEffect（规避反模式）

针对你遇到的场景，React里最惯用的处理方式是使用ResizeObserver API，它能直接监听DOM元素的尺寸变化，不管是子元素更新、窗口大小改变还是其他原因导致的尺寸变更，都会触发回调，完美避开依赖children的反模式问题。

具体实现代码 #

function Component({ children }) {
  const ref = useRef(null);
  // 用useRef保存ResizeObserver实例，避免重复创建
  const resizeObserverRef = useRef(null);

  useEffect(() => {
    // 初始化ResizeObserver，定义尺寸变化时的处理逻辑
    resizeObserverRef.current = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        // 在这里执行你需要的尺寸相关操作
        console.log("元素当前尺寸：", width, height);
        // do something based on ref.current size
      }
    });

    // 开始监听目标div元素
    if (ref.current) {
      resizeObserverRef.current.observe(ref.current);
    }

    // 组件卸载或effect重新触发时，取消监听防止内存泄漏
    return () => {
      if (resizeObserverRef.current) {
        resizeObserverRef.current.disconnect();
      }
    };
  }, []); // 依赖数组为空，ResizeObserver会自动监听尺寸变化

  return <div ref={ref}>{children}</div>;
}

方案优势 #

1. 无需依赖children：避免了把children加入依赖数组的反模式（children是复杂类型，依赖数组中引用变化不可控，容易导致不必要的重复渲染）。
2. 精准监听尺寸变化：不管是子元素更新、父容器变化还是窗口 resize，只要目标div的尺寸改变，就会触发回调，覆盖所有可能的尺寸变更场景。
3. 内存安全：通过useEffect的清理函数断开ResizeObserver，避免组件卸载后仍存在监听导致的内存泄漏。

内容的提问来源于stack exchange，提问作者apieceofbart