React集成fabric.js无需按钮自动渲染矩形实现问题

问题根源 #

你之前的写法不生效核心是三个点：

• React的state更新是异步批处理的，在useEffect里调用setCanvas之后，同步代码里拿不到更新后的canvas state值
• 没必要把画布实例存在state里，fabric的canvas实例是命令式对象，变化不需要触发组件重渲染，用ref存储更合理，也不会有异步取值问题
• useEffect空依赖数组本身就会在组件挂载、DOM渲染完成后执行，完全对应页面加载完成的时机，不需要额外绑定onload事件。

可直接运行的代码 #

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

const Canvas = () => {
  const canvasRef = useRef(null);
  
  useEffect(() => {
    // 初始化画布
    const canvas = new fabric.Canvas('canvas', {
      height: 800,
      width: 800,
    });
    canvasRef.current = canvas;

    // 画布初始化完成后直接添加矩形，不需要点击触发
    const rect = new fabric.Rect({
      height: 280,
      width: 200,
      fill: 'yellow',
      // 可选：设置偏移让矩形居中显示，默认会贴在画布左上角
      left: 300,
      top: 260
    });
    canvas.add(rect);
    canvas.renderAll();

    // 组件卸载时销毁画布，避免内存泄漏
    return () => {
      canvas.dispose();
    }
  }, []); 
  
  return(
    <div>
     <br/><br/>
     <canvas id="canvas" />
    </div>
  );
}
export default Canvas;

如果你想保留原有state写法 #

不需要改整体结构，只要在useEffect里初始化完画布立刻调用添加矩形的方法就行，不要等state更新后再拿值：

useEffect(() => {
  const canvasInstance = initCanvas();
  setCanvas(canvasInstance);
  // 直接用刚创建的实例添加矩形，跳过state异步更新的问题
  addRect(canvasInstance);
}, []);

改完页面加载完成就会直接渲染黄色矩形，不需要任何点击操作。

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