Question

更新：它所发现的图像的尺寸设置为5k分辨率因此巨大的ram使用。虽然垃圾收集在较低分辨率的照片上正在进行，但该网站仍然对Android Chrome造成严重影响。感谢所有回答者。

我对ReactJS和一些img标签有点问题。我没有使用JSX所以我的代码是在javascript中。我的启动页面占用了120兆字节的内存，但是当我点击进入包含6张图像的部分时，尽管每张图像的容量为900kb，但内存仍能达到900兆字节。我已经设置了shouldComponentUpdate，并且图像没有一致地更新。我添加了一个随机查询标志来绕过这个没有改变内存泄漏。

var Modal_Image = React.createClass({

  showModal: function(url){
    store.dispatch({type: "SHOW_MODAL", src: url});
  },
  shouldComponentUpdate: function(next_props, _){
    console.log("modal image might update");
    if(next_props.url != this.props.url){
      return true;
    }
    if(next_props.size != this.props.size){
      return true;
    }
    return false;
  },
  componentDidUpdate:function(){
    console.log("modal image updated");
  },
  render: function(){
    return(
      React.createElement("div", {className: "image-holder " + this.props.size},
        React.createElement("img", {src: this.props.url, className: "home-image c-hand", alt: "", onClick: this.showModal.bind(this, this.props.url) })
      )
    )
  }
});

尺寸道具或网址都没有变化，而且console.logs也没有报告任何更改，但Chrome需要800兆字节才能存储这些图片。处理涉及图像的内存泄漏问题的任何想法或提示？

加法： / ** * React v15.3.0 * /

编辑：

删除了componentWillUnmount方法。
删除了动画fadeIn
删除缓存清除查询标志似乎有帮助

Answer 1

直接怀疑是jQuery，因为它将数据添加到它应用的DOM节点，如果没有被jQuery清理，这可能会导致内存泄漏。此外，react负责清除它呈现的元素，例如组件根（div）和内容（图像本身）。删除componentWillUnmount方法和jQuery。

btw - React.createClass自动将方法发送到this，因此您只需拨打电话即可 this.showModal代替this.showModal.bind(this, this.props.url)和

  showModal: function(){
    store.dispatch({type: "SHOW_MODAL", src: this.props.url});
  },

Answer 2

问题原来只是图像尺寸。我缩小了它们并实现了缩略图，应用程序的内存使用量大幅缩减，垃圾收集速度明显加快。后者也很有趣，因为它表明chrome在内存中保留了大量（> 200兆字节）的文件。 App的总内存使用量现在低于Facebook。因此请仔细观察图像尺寸。

ReactJS Img Tag内存泄漏

2 个答案: