如何解决调整窗口大小时为什么要卸载React组件?
我经历了对我来说很奇怪的行为。当我调整浏览器窗口的大小时,然后卸载该组件,并再次渲染我的来宾,但是松散了所有预期状态
对于main.js,我编写了一个称为自身的递归函数:
import React from "react";
import { render } from "react-dom";
// TTL element
import TTLChart from "./TTLChart"
import TTLChartControl from "./TTLChartControl"
import TTLChartEditControl from "./TTLChartEditControl"
(function(window){
console.log('TTLStockChartInit');
window.TTLStockChart = TTLStockChart;
function TTLStockChart(pChartElement,pChartCtrlElement,pChartEditCtrlElement)
{
if (!pChartCtrlElement)
{
//🤷
render(
<div id="chartWithLoader">
<div id="TTLStockChart_Loaderdiv" className="TTLStockChart_Loaderdiv" style={{"display":"none"}}></div>
<div id="TTLStockChart_NoData" className="TTLStockChart_NoData" style={{"display":"none"}}>No Data</div>
<div id="TTLStockChart_C_Main" className="TTLStockChart_C_Main"/>
<div id="TTLStockChart_C_Ctl" className="TTLStockChart_C_Ctl" />
<div id="TTLStockChart_C_EditCtl" className="TTLStockChart_C_EditCtl" />
</div>,document.getElementById(pChartElement));
this.mvChartElement = "TTLStockChart_C_Main";
this.mvChartCtrlElement = "TTLStockChart_C_Ctl";
this.mvChartEditCtrlElement = "TTLStockChart_C_EditCtl";
// setScroll();
}
else
{
this.mvChartElement = pChartElement;
this.mvChartCtrlElement = pChartCtrlElement;
this.mvChartEditCtrlElement = pChartEditCtrlElement;
}
this.mvTimeLineHeight = 100;
this.changeLayout("Light");
}
TTLStockChart.prototype.drawChart = function(pData)
{
// Point format: ["yyyy-MM-dd HH:mm:ss",close,high,low,open,volume]
// {data:[[p1],[p2],[p3]]}
var rawData;
if (pData && pData.data && pData.data.length > 0)
rawData = pData.data;
else if (pData && pData.points && pData.points.length > 0)
rawData = pData.points;
if (rawData === undefined)
{
document.getElementById("TTLStockChart_NoData").style.display = "";
if (this.alreadyDraw)
document.getElementById(this.mvChartElement).style.display = "none";
return;
}
document.getElementById("TTLStockChart_NoData").style.display = "none";
if (!this.alreadyDraw) // First time draw chart with data
{
if (this.mvChartHeight === undefined)
{
console.error("TTLStockChart: Chart height not set!");
return;
}
this.alreadyDraw = true;
if (!this.mvChartWidth)
{
var FitWidthChart = TTLChart.fitWidth(TTLChart);
//PLEASE NOTICE THIS IS THE COMPONENT THAT BEING UNMOUNTED WHENEVER RESIZE WINDOW BROWSER
// change the type from hybrid to svg to compare the performance between svg and canvas
this.chartRdrObj = render(<FitWidthChart height={this.mvChartHeight} timeLineHeight={this.mvTimeLineHeight} simpleMode={this.mvSimpleMode} rawData={rawData} chartLayout={this.chartLayout} isMobile={this.isMobile} />,document.getElementById(this.mvChartElement));
this.chartObj = this.chartRdrObj;//.getWrappedInstance();
console.log("isMobile",this.isMobile)
}
else
{
this.chartRdrObj = render(<TTLChart width={this.mvChartWidth} ratio={1} height={this.mvChartHeight} timeLineHeight={this.mvTimeLineHeight} simpleMode={this.mvSimpleMode} rawData={rawData} chartLayout={this.chartLayout} isMobile={this.isMobile} />,document.getElementById(this.mvChartElement));
this.chartObj = {node: this.chartRdrObj};
console.log("this.isMobile",this.isMobile)
}
this.chartCtrl = render(<TTLChartControl chartMethod={this}/>,document.getElementById(this.mvChartCtrlElement));
this.refreshChartCtrl = this.chartCtrl.refresh;
this.chartEditCtrl = render(<TTLChartEditControl chartMethod={this}/>,document.getElementById(this.mvChartEditCtrlElement));
if (this.setChartType_state)
{
this.setChartType(this.setChartType_state);
this.setChartType_state = undefined;
}
if (this.importState_state)
{
this.importState(this.importState_state);
this.importState_state = undefined;
}
}
else
{
document.getElementById(this.mvChartElement).style.display = "";
this.getChartObj().setRawData(rawData);
}
}
... many setter here
此后,为了通过Webview嵌入到移动应用程序中,我创建了一个html:
<!DOCTYPE html>
<html style="margin: 0px;">
<head>
<meta charset="utf-8" name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>TTLStockChart_Historical</title>
<style>
.TTLStockChart {
/* position: absolute; */
/* left: -5px; */
/* right: 17px; */
}
</style>
</head>
<body style="margin: 0px;"><!-- window.location='command://onload' -->
<div class="bootstrap-iso">
<div id="chart">
</div>
</div>
</body>
<script src="./TTLStockChart/TTLStockChart_bundle.js"></script>
<script>window.chartMethod = new TTLStockChart("chart");
function updateSimpleChart(d,h)
{
chartMethod.setChartHeight(h);
chartMethod.setTimeLineHeight(-1);
chartMethod.setSimpleMode(false);
chartMethod.showChartControl(false);
chartMethod.showChartEditControl(false);
chartMethod.changeLayout("Light",true);
chartMethod.importState([
'Line',[['InChartVol']],[['STC',[14,5,3],70],['MACD',[12,26,9],70]]
])
chartMethod.drawChart(d);
return true;
}
function updateChart(d,h,lh) {
chartMethod.setChartHeight(h);
chartMethod.setTimeLineHeight(lh);
chartMethod.showChartEditControl(false);
chartMethod.drawChart(d);
chartMethod.setChartType("IntraDay");
chartMethod.importState(["Candle",[["InChartVol"]],[]]);
return true;
}
上面的设置器是要为组件更新的状态。我尝试控制台登录componentWillUnmount并查看在调整浏览器大小时是否会卸载
如果此代码错误,请提出建议并纠正我:(预先感谢。Bwt我正在使用react-stockcharts库
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。