React Context传递的useRef引用更新异常问题求助

问题根源分析 #

你的问题核心出在三个关键点：

1. Ref触发时机与图片加载不同步：直接在ref回调中设置Context的imageRef，此时DOM元素已挂载，但图片资源可能还未加载完成，导致naturalHeight/naturalWidth等属性为0。React的ref回调会在DOM更新时立即执行，而图片加载是异步过程。
2. Context状态管理冗余且依赖错误：
   • 用useState保存图片ref完全没必要，ref本身是可变容器，不需要通过状态更新同步。
   • setImageRef的useCallback依赖了imageRef，会导致每次imageRef变化，回调函数就重新创建，进而触发ref回调多次执行，可能传递未就绪的元素或null。
3. Safari加载行为差异：Safari对图片加载时机的处理更严格，DOM挂载后图片资源可能仍在加载，此时读取属性会得到0值。

修复方案 #

1. 重构Context，移除冗余状态 #

直接用useRef保存图片元素，通过getter确保获取最新ref值，同时修正useCallback的依赖：

export const ProjectContext: FC<ContextProps> = ({ children }) => {
  const imgRef = useRef<HTMLImageElement | null>(null);

  const setImageRef = useCallback((ref: HTMLImageElement | null) => {
    imgRef.current = ref;
  }, []);

  return (
    <PrjContext.Provider
      value={{
        get imageRef() {
          return imgRef.current;
        },
        setImageRef
      }}>
      {children}
    </PrjContext.Provider>
  );
};

2. 图片组件中在onLoad事件中设置Ref #

确保图片完全加载后再传递ref给Context，保证属性值正确：

const ImageAnalysis = () => {
  const { setImageRef } = useContext(PrjContext);
  const { imageBase64String: imgSrc } = projectData || {};

  if (!imgSrc) return null;

  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
    const imgElement = e.target as HTMLImageElement;
    setImageRef(imgElement);
  };

  return (
    <Image
        id="analysis_image"
        draggable={false}
        onLoad={handleImageLoad}
        src={imgSrc}
        isHorizontalImage={true}
    />
  );
};

export default ImageAnalysis;

注：如果你的自定义Image组件封装了原生img，需确保透传onLoad事件给原生元素

3. 依赖imageRef的组件处理 #

若有组件需要基于图片属性做计算，通过useEffect监听ref变化：

const SomeComponent = () => {
  const { imageRef } = useContext(PrjContext);
  const [imgDimensions, setImgDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (imageRef) {
      setImgDimensions({
        width: imageRef.naturalWidth,
        height: imageRef.naturalHeight
      });
    }
  }, [imageRef]);

  // 基于imgDimensions执行后续逻辑
};

额外注意事项 #

• 添加onError事件处理图片加载失败的情况，避免设置无效ref。
• 组件卸载时可在useEffect清理函数中设置imgRef.current = null，避免内存泄漏。

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