我在React中有一个函数组件,我也在使用KonvaJS npm库。当函数组件重新呈现它时,它增加了内存占用。
Chrome task manager
我的准则
import React, { useState, useEffect, useSelector} from "react";
import { Stage as stageKonva } from "konva/lib/Stage";
import { Line as LineKonva } from "konva/lib/shapes/Line";
import { Animation as AnimationKonva } from "konva/lib/Animation";
import { Layer as LayerKonva } from "konva/lib/Layer";
import { Image as ImageKonva } from "konva/lib/shapes/Image";
export const Abc = (data)=>{
const { device } = useSelector((state) => ({ device: state.device }));
useEffect(() => {
gameStart();
},[device])
async function gameStart (){
var stage = new stageKonva({ container: "gamePanel", width: 300, height: 300});
var layer = new LayerKonva(), oldRow = null; stage.add(layer);
var imageObj1 = new Image();
imageObj1.onload = function () {
let square = new ImageKonva({ x: 0, y: 0, height: 40, width: 20, image: imageObj1 });
------------------------------
---------Some code here-------
------------------------------
}
imageObj1.src = data.image;
}
return(<div id="gamePanel"></div>);
}
我想知道为什么重新渲染时内存占用会增加。怎么阻止?
1条答案
按热度按时间4uqofj5v1#
您应该做一个更深入的内存分析,看看内存中有什么。
从你的代码中,很难说你什么时候运行效果以及运行了多少次。
可能它被调用了很多次,所以它在内存中创建了很多Konva节点示例。你可以在效果中做清洁:
仅仅摧毁舞台可能还不够。您可能需要检查动画和其他内容。