在 React 中使用 HTML Canvas getContext() 而不使用 useEffect 钩子？

Question

我目前正在尝试学习 html canvas，遵循使用 Vanilla JS 执行以下操作的教程：

const canvas = document.getElementById("#myCanvas");
const context = canvas.getContext("2d");

我还尝试使用 useRef 钩子，因为我正在使用 React 来构建相同的钩子。它一直显示错误，所以我控制台记录了画布值，如下所示，并且我不断收到“null”：

import React, {useRef} from 'react';
import './App.css'

const Canvas = () => {
    const canvasRef = useRef(null);
    const canvas = canvasRef.current;
    console.log(canvas);  //LOGS "null"
    const context = canvas.getContext("2d"); //HENCE THIS PRODUCES ERROR "can't read getContext() of null"

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

export default Canvas;

我遇到过一些使用 useEffect 挂钩的解决方案。但我听说在 React 编码中使用 useEffect 可能不是一个好的实践。

此外，这些示例将几乎所有的画布编码放在 useEffect 挂钩中！这肯定感觉是糟糕的代码设计。

还有其他方法可以解决这个问题吗？

Answer 1

在第一次渲染期间，canvasRef.current 为 null。这是因为画布还不存在。你必须完成渲染，然后react必须更新dom，然后react会将canvas元素分配给

canvasRef.current

。

您需要等到这种情况发生才能运行您的代码。渲染完成后运行代码的方法是使用

useEffect

，所以这就是您应该放置代码的位置。

但我听说在 React 编码中使用 useEffect 可能不是一个好的实践。

人们确实过度使用它，但它有它的用途。这是其中之一。