React中如何将Canvas类组件重构为函数组件？

我正在用React开发HTML Canvas项目，为统一技术栈、避免类组件与函数组件混用，需要将实现蓝色矩形左右移动功能的Bar类组件重构为函数式方案。已完成初步尝试，但不清楚在Visualiser组件中如何正确使用——比如是将它作为函数调用、以<Bar/>形式渲染并传入props，还是将<Bar/>赋值给变量后调用其draw方法？

原生JavaScript类组件及使用 #

class Bar {
  constructor(x, y, width, height, color) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
  }
  update(){
    this.x++;
  }
  draw(context){
    context.fillStyle = this.color;
    context.fillRect(this.x, this.y, this.width, this.height);
  }
}

使用示例：

const bar1 = new Bar(10, 10, 100, 200, "blue");
function animate(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  bar1.draw(ctx);
  requestAnimationFrame(animate);
}
animate();

我的重构尝试 #

Bar函数组件：

import React, {useState} from 'react';

const Bar = ({initialX, initialY, initialWidth, initialHeight, initialColor}) => {
    const [x, setX] = useState(initialX);
    const [y, setY] = useState(initialY);
    const [width, setWidth] = useState(initialWidth);
    const [height, setHeight] = useState(initialHeight);
    const [color, setColor] = useState(initialColor);

    const update = () => {
        const newX = x + 1;
        setX(newX);
    }

    const draw = (context) => {
        context.fillStyle = color;
        context.fillRect(x, y, width, height);
    }


    return (
        <div>
            
        </div>
    );
};

export default Bar;

Visualiser组件：

import Bar from "../components/Bar.jsx";

const Visualiser = () => {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const animate = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        requestAnimationFrame(animate);
    }
    animate();
};

export default Visualiser;

正确实现方案 #

你之前的思路有误：React组件是用来渲染DOM元素的，而原生Bar类是Canvas绘制逻辑的封装，不能直接转换成返回空div的React组件。要统一函数式技术栈，应该用自定义Hook封装Bar的状态和绘制逻辑，再在Visualiser中结合React的生命周期管理Canvas动画。

步骤1：封装自定义Hook useBar #

// src/hooks/useBar.js
import { useState, useCallback } from 'react';

export const useBar = (initialX, initialY, initialWidth, initialHeight, initialColor) => {
  const [x, setX] = useState(initialX);
  const [y, setY] = useState(initialY);
  const [width, setWidth] = useState(initialWidth);
  const [height, setHeight] = useState(initialHeight);
  const [color, setColor] = useState(initialColor);

  // 用useCallback缓存方法，避免每次渲染创建新函数
  const update = useCallback(() => {
    // 函数式更新避免闭包问题
    setX(prevX => prevX + 1);
  }, []);

  const draw = useCallback((context) => {
    context.fillStyle = color;
    context.fillRect(x, y, width, height);
  }, [x, y, width, height, color]);

  return { x, y, width, height, color, update, draw };
};

步骤2：重构Visualiser组件 #

// src/components/Visualiser.jsx
import { useRef, useEffect } from 'react';
import { useBar } from '../hooks/useBar';

const Visualiser = () => {
  // 用useRef获取canvas元素，替代document.getElementById
  const canvasRef = useRef(null);
  // 初始化Bar的状态和方法
  const { draw, update } = useBar(10, 10, 100, 200, "blue");

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let animationId;
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 调用Bar的绘制方法
      draw(ctx);
      // 更新Bar的位置
      update();
      animationId = requestAnimationFrame(animate);
    };

    animate();

    // 组件卸载时取消动画，避免内存泄漏
    return () => cancelAnimationFrame(animationId);
  }, [draw, update]); // 依赖draw和update，确保方法更新时重新启动动画

  return <canvas ref={canvasRef} id="myCanvas" />;
};

export default Visualiser;

关键说明 #

1. 不要把Canvas绘制逻辑做成React组件：React组件的核心是渲染DOM，你的原Bar组件返回空div完全无法发挥作用，反而混淆了逻辑。
2. 用useRef操作Canvas：避免直接用document.getElementById，因为React渲染时DOM可能还未挂载，useRef能安全获取DOM元素。
3. useEffect管理动画生命周期：动画循环要在useEffect中启动，组件卸载时必须取消requestAnimationFrame，防止内存泄漏。
4. useCallback缓存方法：避免每次组件渲染都创建新的update和draw函数，导致useEffect重复触发。
5. 函数式状态更新：setX(prevX => prevX + 1)能避免闭包导致的状态更新异常。

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