ChenMatsu
commented
2 years ago 目前透過下列寫法 暫時解決記憶體問題... 只是似乎很難搭配動畫或者透過計時器去遞增/遞減百分比來達成動畫特效。
useEffect(() => {
const gaugeOne = new Gauge("solo-press-machine-gauge-one", soloPressMachineGaugeConfig);
gaugeOne.update(soloPressMachineGaugeConfig);
gaugeOne.changeData(+D100.value / 1000);
return () => {
if (gaugeOne) {
gaugeOne.destroy();
}
};
}, [D100]);
useEffect(() => {
const gaugeTwo = new Gauge("solo-press-machine-gauge-two", soloPressMachineTwoGaugeConfig);
gaugeTwo.update(soloPressMachineTwoGaugeConfig);
gaugeTwo.changeData(+D4.value / 100);
return () => {
if (gaugeTwo) {
gaugeTwo.destroy();
}
};
}, [D4]);
🐛 Question description [Please make everyone to understand it]
透過Redux-Toolkit管理資料狀態，將從Mqtt接收到的即時資料送進Redux Store後，Gauge根據useAppSelector會重新 / 重覆Render同時造成記憶體用量暴增，最終導致Chrome關閉分頁。不確定這是否算是Bug。即便useAppSelector的狀態改變觸發儀表板重新渲染也應當會清除先前舊的儀表板，但觀測下來似乎並沒有清除。透過Chrome Dev Memory Profile可以觀測到Gauge and Chart佔用相當高的記憶體。
💻 Link to minimal reproduction
Codepen Sandbox
🏞 Expected result
預期記憶體使用量 實際執行五分使用量
🚑 Any additional [like screenshots]