ReactJS Img 标签内存泄漏答案

【问题标题】：ReactJS Img Tag Memory LeakReactJS Img 标签内存泄漏
【发布时间】：2016-12-04 23:04:49
【问题描述】：

更新：事实证明，图像的尺寸设置为 5k 分辨率，因此使用了巨大的内存。虽然垃圾收集正在对分辨率较低的照片进行处理，但该网站仍然对 Android Chrome 造成了沉重的负担。感谢所有回答者。

伙计们，我在使用 ReactJS 和一些 img 标签时遇到了一些问题。我没有使用 JSX，所以我的代码在 javascript 中。我的启动页面占用 120 兆字节的内存，但是当我单击转到包含 6 个图像的部分时，尽管每个图像为 900 kb，但内存会膨胀到 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) })
      )
    )
  }
});

size 属性或 url 属性都没有改变，并且 console.logs 没有报告任何更改，但 Chrome 需要 800 兆字节来存储这些图像。有关处理涉及图像的内存泄漏问题的任何想法或提示？

补充： /** * 反应 v15.3.0 */

编辑：

删除了 componentWillUnmount 方法。
移除了动画淡入
删除了缓存破坏查询标志似乎有所帮助

【问题讨论】：

标签： javascript jquery reactjs memory-leaks

【解决方案1】：

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

顺便说一句 - React.createClass 自动将方法绑定到 this，所以你可以调用 this.showModal 而不是 this.showModal.bind(this, this.props.url)，和

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

【讨论】：

不幸的是，在我发现内存泄漏之后添加了 jQuery 方法以便清理（空的摆脱了分离的 dom 节点）。我刚刚删除它，问题仍然存在。不过感谢您的指点。问题似乎出在其他地方。
试试 chrome 开发工具 memory diagnosis 方法。
是的，我用它来确定罪魁祸首，但我会再看看。现在我正在构建网站的简化版本，看看是否可以在其他地方复制错误。

【解决方案2】：

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

【讨论】：