ReactJS与FabricJS问题：画布平移/缩放后图片消失

安全阿岳

2026-7-30

React + FabricJS 拖放图片平移/缩放后消失问题

我用ReactJS和FabricJS实现图片拖放至画布的功能，拖放图片后对画布进行平移或缩放操作时，图片会消失。排查发现问题与渲染语法直接相关：

使用带StrictMode的新渲染语法时出现异常：

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

改用已废弃的旧渲染语法时功能完全正常：

ReactDOM.render(<App />, document.getElementById("root"));

问题原因

React StrictMode在开发环境下会重复调用组件的副作用、生命周期函数（比如useEffect、类组件的componentDidMount），如果FabricJS的画布初始化、事件绑定逻辑未处理这种重复执行场景，会导致画布实例被重复创建，或拖放的图片对象在重复初始化过程中丢失，最终触发平移/缩放时图片消失的问题。

解决办法

开发环境临时规避：去掉StrictMode包裹，直接渲染App组件：
```
root.render(<App />);
```

兼容StrictMode修复逻辑：

用useRef存储Fabric画布实例，确保只初始化一次：

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

function App() {
  const canvasDomRef = useRef(null);
  const fabricCanvas = useRef(null);

  useEffect(() => {
    // 避免重复初始化画布实例
    if (fabricCanvas.current) return;
    fabricCanvas.current = new fabric.Canvas(canvasDomRef.current);

    // 在此绑定拖放、平移缩放等事件逻辑

    // 组件卸载时销毁画布实例
    return () => {
      fabricCanvas.current?.dispose();
      fabricCanvas.current = null;
    };
  }, []);

  return <canvas ref={canvasDomRef} />;
}