如何将 React 类组件转换为函数组件

Question

我想在画布内显示图像。我将其作为类组件进行，但我的要求是使用函数组件：

class Canvas extends React.Component {
  componentDidMount() {
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext("2d");
    const img = this.refs.image;    

    img.onload = () => {
      ctx.drawImage(img, 0, 0, this.props.data.w, this.props.data.h);
    }
  }  

  render() {
    const prop = this.props.data;
    return (
      <div data-id={prop.ukey} key={prop.ukey}>
        <canvas data-id={prop.ukey} key={prop.ukey} ref="canvas" width={prop.w} height={prop.h} />
        <img alt="doc-img" ref="image" src={prop.image} className="hidden" />
      </div>
    );
  }
}

Answer 1

由于您只需要在 componentDidMount 中执行代码，因此具有空依赖数组的 useEffect 与此等价。对于裁判，你也可以使用useRef hook

const Canvas = ({data: prop}) => {
    const img = useRef(null);
    const cnv = useRef(null);
    useEffect(() => {
      const canvas = cnv.current;
      const image = img.current;
      const ctx = canvas.getContext("2d");  

      image.onload = () => {
        ctx.drawImage(image, 0, 0, prop.w, prop.h);
      }
    }, [])
    return (
      <div data-id={prop.ukey} key={prop.ukey}>
        <canvas data-id={prop.ukey} key={prop.ukey} ref={cnv} width={prop.w} height={prop.h} />
        <img alt="doc-img" ref={img} src={prop.image} className="hidden" />
      </div>
    );
}

附注我强烈建议您通过docs of hooks 并在将来尝试您的代码，然后再提出此类问题