javascript - React unmount 真的会移除元素吗？

Question

我创建了一个仅呈现空画布元素的组件。在使用效果初始化后，我画了一个小方块，然后开始一个间隔在不同的位置重新绘制方块。最初我没有使用状态，只是将值存储在局部变量中，正方形按预期重新绘制，并且组件没有重复卸载和渲染。

然后我尝试将变量置于状态以查看画布是否会在卸载时被清除/删除并在渲染时重新创建新鲜和干净，但事实并非如此。该组件不断被卸载和重新渲染，但它似乎总是渲染旧画布的内容。

这个虚拟 DOM 在工作吗？我似乎找不到任何关于此的内容，因为大多数关于 React Render 的文章都只是说“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>
    )
}

标签： javascriptreactjstypescript