javascript - ReactJS Img 标签内存泄漏

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) })
      )
    )
  }
});

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

添加:/** * react v15.3.0 */

编辑:

1. 删除了 componentWillUnmount 方法。
2. 移除动画淡入
3. 删除缓存清除查询标志似乎有所帮助

Answer 1

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

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

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