我使用ReactJS编写了一个多页面应用程序。当重新呈现具有a的页面/组件时,浏览器内存会增加。卸载组件时,似乎未清除内存。我希望卸载组件时浏览器内存会减少。有没有人建议如何在卸载时清除此图像的内存?
感谢,
添
import React from 'react';
export class About extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
<div id='about' >
<div className="container">
<div className="row">
<div className="col-md-6">
<h2>title</h2>
<p>getting your ideas made</p>
</div>
<div className="col-md-6">
<img src="app/images/pic3.png" alt=""/>
</div>
</div>
</div>
</div>
)
}
}
以下是页面安装到的父组件:
import React from 'react';
import ReactDOM from 'react-dom';
import {RightPane} from './components/RightPane.js'
import {LeftPane} from './components/LeftPane.js'
import {ModelLibrary} from './components/ModelLibrary.js'
import {ProjectsListing} from './components/ProjectsListing.js'
import {About} from './components/page_about.js'
import {Renderer} from './components/Renderer.js'
function MainSwitch(view){
switch (view) {
case 'listing':
return <ProjectsListing />
break;
case 'viewer':
return (
<div>
<Renderer />
<LeftPane />
<RightPane />
</div>
)
break;
case 'about':
return <About />
break;
default:
return (
<div>
<Renderer />
</div>
)
}
}
export class ReactRoot extends React.Component {
constructor(props) {
super(props);
this.state={
mainpage:''
}
}
showPage = (event)=>{
console.log(event.detail);
this.setState({
mainpage:event.detail
})
}
componentDidMount(){
window.addEventListener('page-change', this.showPage, false);
}
componentWillUnMount(){
window.removeEventListener('page-change', this.showPage, false);
}
render() {
return (
<div >
<div id='mainpage'>
{MainSwitch(this.state.mainpage)}
</div>
</div>
);
}
}