初始挂载时useEffect中ref.current.clientWidth获取值异常问题

这种偶发的clientWidth与实际值不符的问题，核心原因是空依赖的useEffect执行时机早于DOM元素完全渲染稳定——比如元素依赖的图片还没加载完成、异步加载的样式还未生效，此时元素的实际尺寸还未确定，拿到的就是未完全渲染前的错误值；只有当资源加载速度快时才能拿到正确值，所以会出现约20%的触发概率。

下面是几种可行的解决方法：

方案1：用ResizeObserver监听元素尺寸（覆盖初始+动态变化） #

ResizeObserver能监听元素尺寸的所有变化，同时配合微任务延迟确保初始DOM稳定：

useEffect(() => {
  const targetElement = ref.current;
  if (!targetElement) return;

  const updateElementWidth = () => {
    setCurrentWidthChange(targetElement.clientWidth);
  };

  // 用微任务延迟，确保样式、资源加载后的尺寸已确定
  queueMicrotask(updateElementWidth);

  // 监听元素后续尺寸变化，响应式场景也能适配
  const resizeObserver = new ResizeObserver(updateElementWidth);
  resizeObserver.observe(targetElement);

  // 组件卸载时清理监听
  return () => {
    resizeObserver.unobserve(targetElement);
  };
}, []);

方案2：依赖元素关联的资源加载状态 #

如果元素尺寸依赖图片、字体等外部资源，可监听资源加载完成事件，再获取尺寸：

const [isImageLoaded, setIsImageLoaded] = useState(false);

useEffect(() => {
  if (!ref.current || !isImageLoaded) return;
  setCurrentWidthChange(ref.current.clientWidth);
}, [isImageLoaded]);

// 示例：图片加载完成后触发状态更新
<img 
  src="./your-image.png" 
  onLoad={() => setIsImageLoaded(true)}
  alt="示例图"
/>

方案3：用useLayoutEffect替代useEffect #

useLayoutEffect会在DOM更新完成后、浏览器绘制前同步执行，比useEffect更早拿到准确的DOM尺寸，但注意它会阻塞渲染，不要在其中执行耗时操作：

useLayoutEffect(() => {
  if (!ref.current) return;
  setCurrentWidthChange(ref.current.clientWidth);
}, []);

注：该方案仅解决纯DOM渲染导致的尺寸问题，若涉及外部资源加载，仍需结合方案1或方案2。

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