Блог

Я создал компонент, который отображает только пустой элемент canvas. После инициализации в use effect я рисую небольшой квадрат, а затем запускаю интервал, чтобы перерисовать квадрат в разных местах. Первоначально я сделал это без использования state и просто сохранил значение в локальной переменной, квадрат был перерисован, как и ожидалось, и компонент не был повторно размонтирован и отрисован.

Затем я попытался перевести переменную в состояние, чтобы посмотреть, будет ли холст очищен / удален при размонтировании и воссоздан свежим и чистым при рендеринге, но это не так. Компонент постоянно размонтируется и повторно отображается, но, похоже, он всегда отображает содержимое старого холста.

Работает ли этот виртуальный DOM? Кажется, я ничего не могу найти по этому поводу, поскольку в большинстве статей о React Render просто говорится: «Функция рендеринга вставляет HTML в DOM».

 import React, { FunctionComponent, useEffect, useState } from 'react';

interface Babylon_props { }

export const Babylon: FunctionComponent<Babylon_props> = (props) =>
{
    let canvas: HTMLCanvasElement;
    let ctx: CanvasRenderingContext2D;
    let interval: number;
    //let x = 0;

    let tick = () => 
    {
        ctx.fillRect(x, x, 20, 20);
        setX(x   10);
        //x  = 10;
    }

    const [x, setX] = useState(0);

    useEffect(() => 
    {
        console.log("Creating Babylon component...");

        canvas = document.getElementById("BblCanvas") as HTMLCanvasElement;
        ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 10, 10);

        interval = setInterval(tick, 1000);

        return () =>
        {
            console.log("Destroying Babylon component...");
            clearInterval(interval);
        };

    }, [x]);

    return (
        <canvas id="BblCanvas" width="800" height="600"></canvas>
    )
}