如何在容器尺寸变化的同一帧中精确重绘SVG以消除延迟？

我太懂你这种橡皮筋延迟的糟心感了——React的state更新是异步批量处理的，刚好和ResizeObserver的尺寸变化不在同一帧，就导致了视觉上的滞后。下面给你几个实用的解决方案，从易到难：

方案一：用Ref跟踪尺寸+强制同步重绘 #

React的state更新异步特性是延迟的核心，我们可以用useRef直接存储最新尺寸，跳过state的异步队列，再配合强制重绘来同步更新：

首先修改父组件的尺寸存储逻辑：

import { useState, useRef, useCallback, useEffect } from "react";

// 实现一个简单的强制重绘函数
const [, forceUpdate] = useState({});
const triggerUpdate = () => forceUpdate({});

const containerRef = useRef<HTMLDivElement>(null);
const sizeRef = useRef({
  containerWidth: initialDimension.width,
  containerHeight: initialDimension.height,
});

const setContainerSize = useCallback(
  (newWidth: number, newHeight: number) => {
    const roundedWidth = Math.round(newWidth);
    const roundedHeight = Math.round(newHeight);
    if (
      sizeRef.current.containerWidth === roundedWidth &&
      sizeRef.current.containerHeight === roundedHeight
    ) {
      return;
    }
    // 直接更新ref，同步无延迟
    sizeRef.current = {
      containerWidth: roundedWidth,
      containerHeight: roundedHeight,
    };
    // 触发组件重绘，因为ref变化不会自动触发渲染
    triggerUpdate();
  },
  [],
);

// 原ResizeObserver逻辑不变，只是用setContainerSize更新ref
useEffect(() => {
  const callback = (entries: ResizeObserverEntry[]) => {
    const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
    setContainerSize(containerWidth, containerHeight);
  };
  const observer = new ResizeObserver(callback);

  if (containerRef.current) {
    const { width, height } = containerRef.current.getBoundingClientRect();
    setContainerSize(width, height);
    observer.observe(containerRef.current);
  }

  return () => observer.disconnect();
}, [setContainerSize]);

// 渲染Chart时直接用ref里的最新值
return (
  <div ref={containerRef}>
    <Chart 
      width={sizeRef.current.containerWidth} 
      height={sizeRef.current.containerHeight}
    >
      ...
    </Chart>
  </div>
);

这个方法砍掉了state异步更新的环节，让尺寸变化和重绘尽量在同一帧完成，延迟会大幅降低。

方案二：直接操作SVG的viewBox（绕过React渲染流程） #

如果想要彻底消除延迟，可以直接在ResizeObserver回调中修改SVG的DOM属性，完全跳过React的重渲染机制：

首先给Chart组件添加ref并暴露内部SVG的引用：

import { forwardRef, useRef, useEffect } from "react";

// 用forwardRef暴露内部的svgRef
export const Chart = forwardRef<{ svgRef: React.RefObject<SVGSVGElement> }, { children?: React.ReactNode } & ChartProps>(
  (props, ref) => {
    const { children, width, height } = props;
    const svgRef = useRef<SVGSVGElement>(null);

    // 把svgRef暴露给父组件
    useEffect(() => {
      if (ref) {
        (ref as React.MutableRefObject<{ svgRef: React.RefObject<SVGSVGElement> }>).current = { svgRef };
      }
    }, [ref]);

    // 初始化时设置viewBox
    useEffect(() => {
      if (svgRef.current) {
        svgRef.current.setAttribute('viewBox', `0 0 ${width} ${height}`);
      }
    }, [width, height]);

    return (
      <svg
        ref={svgRef}
        preserveAspectRatio="xMidYMid meet"
        style={{ width: "100%", height: "100%" }}
      >
        {children}
      </svg>
    );
  }
);

然后在父组件中直接操作SVG的viewBox：

const containerRef = useRef<HTMLDivElement>(null);
const chartRef = useRef<{ svgRef: React.RefObject<SVGSVGElement> }>(null);

useEffect(() => {
  const callback = (entries: ResizeObserverEntry[]) => {
    const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
    const roundedWidth = Math.round(containerWidth);
    const roundedHeight = Math.round(containerHeight);
    // 直接修改SVG的viewBox属性，同步完成
    if (chartRef.current?.svgRef.current) {
      chartRef.current.svgRef.current.setAttribute('viewBox', `0 0 ${roundedWidth} ${roundedHeight}`);
    }
  };
  const observer = new ResizeObserver(callback);

  if (containerRef.current) {
    observer.observe(containerRef.current);
    // 初始化尺寸
    const { width, height } = containerRef.current.getBoundingClientRect();
    if (chartRef.current?.svgRef.current) {
      chartRef.current.svgRef.current.setAttribute('viewBox', `0 0 ${Math.round(width)} ${Math.round(height)}`);
    }
  }

  return () => observer.disconnect();
}, []);

return (
  <div ref={containerRef}>
    <Chart ref={chartRef}>
      ...
    </Chart>
  </div>
);

这个方法完全绕开了React的状态管理和重渲染流程，ResizeObserver回调触发时直接修改DOM，能保证在同一帧完成尺寸更新，彻底解决延迟问题。

方案三：用React 18的useSyncExternalStore同步外部状态 #

如果你的项目用的是React 18，可以用useSyncExternalStore这个专门的API来订阅外部尺寸变化，让React同步获取最新状态，消除异步延迟：

首先封装尺寸订阅的工具函数：

import { useSyncExternalStore } from "react";

function subscribeToContainerSize(containerRef: React.RefObject<HTMLDivElement>, callback: () => void) {
  const observer = new ResizeObserver(callback);
  if (containerRef.current) {
    observer.observe(containerRef.current);
  }
  return () => observer.disconnect();
}

function getContainerSize(containerRef: React.RefObject<HTMLDivElement>, initialDimension: { width: number; height: number }) {
  if (!containerRef.current) {
    return {
      containerWidth: initialDimension.width,
      containerHeight: initialDimension.height,
    };
  }
  const { width, height } = containerRef.current.getBoundingClientRect();
  return {
    containerWidth: Math.round(width),
    containerHeight: Math.round(height),
  };
}

然后在父组件中使用：

const containerRef = useRef<HTMLDivElement>(null);

// 同步获取最新容器尺寸
const sizes = useSyncExternalStore(
  (callback) => subscribeToContainerSize(containerRef, callback),
  () => getContainerSize(containerRef, initialDimension),
  () => getContainerSize(containerRef, initialDimension),
);

return (
  <div ref={containerRef}>
    <Chart 
      width={sizes.containerWidth} 
      height={sizes.containerHeight}
    >
      ...
    </Chart>
  </div>
);

这个API会让React同步监听ResizeObserver的尺寸变化，一旦尺寸更新就立即触发重渲染，和尺寸变化在同一帧完成，完美解决延迟问题。

额外小优化：调整SVG的preserveAspectRatio #

你当前用的xMidYMid meet可能会让SVG在resize时先按比例缩放再居中，视觉上也会有轻微的橡皮筋感。如果你的图表可以适配任意宽高比，可以改成preserveAspectRatio="none"，让SVG直接拉伸填充容器：

<svg
  viewBox={`0 0 ${width} ${height}`}
  preserveAspectRatio="none"
  style={{ width: "100%", height: "100%" }}
>
  {children}
</svg>

如果需要保持比例，可以试试xMinYMin slice（裁剪超出部分），根据你的需求选择即可。

备注：内容来源于stack exchange，提问作者sak