重新加载Img源时ReactJS内存泄漏

时间:2018-05-17 07:40:41

标签: javascript html reactjs ecmascript-6

我使用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>
    );
  }
}

0 个答案:

没有答案