ReactJS Img 태그 메모리 누수

Question

업데이트 : 밝혀진 이미지의 크기가 5k 해상도로 설정되어있어 거대한 램 사용량입니다. 가비지 수집이 낮은 입술 사진에서 시작되는 동안 사이트는 안드로이드 크롬을 위해 무겁게 무겁게 할 것이다. 모든 tho 응답자에게 감사합니다.

여러분 ReactJS 및 일부 img 태그에 약간의 문제가 있습니다. 내 코드가 자바 스크립트에 JSX를 사용하지 않습니다. 내 스플래시 페이지는 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) }) 
    ) 
    ) 
    } 
}); 

크기의 소품이나 URL의 소품도가 변화되고 console.logs는 변경 사항을 다시보고되지 않습니다 아직 크롬은 이러한 이미지를 저장하는 800 메가 바이트 필요합니다. 이미지와 관련된 메모리 누출 문제를 해결하기위한 아이디어 나 힌트가 있습니까?

추가 : /** * 반작용 v15.3.0 */

편집 :

1. componentWillUnmount 방법을 제거 하였다.
2. 는 fadeIn 애니메이션 제거
3. 제거 쿼리 플래그 파열 캐시는이에 적용된 DOM 노드에 데이터를 추가하기 때문에,

Answer 1

를 호출 할 수 있습니다. 나는 그들을 축소하고 엄지 손톱을 구현하고 응용 프로그램의 메모리 사용량이 급격히 줄어들 었으며 쓰레기는 상당히 빨리 수집되었습니다. 나중에 크롬은 메모리에 큰 (> 200 메가 바이트) 파일을 유지할 것을 제안하기 때문에 흥미 롭습니다. 앱의 총 메모리 사용량이 Facebook의 메모리 사용량보다 적습니다. 따라서 이미지 크기를 자세히 관찰하십시오.

Answer 2

즉각적인 용의자가 jQuery를입니다 도움이 보인다, 이것은 메모리가 발생할 수 있습니다 jQuery로 청소하지 않으면 누수가 발생합니다. 또한 반응은 구성 요소 루트 (div) 및 내용 (이미지 자체)과 같이 렌더링 된 요소를 정리합니다. componentWillUnmount 메소드와 jQuery도 제거하십시오.

BTW - this에 React.createClass autobinds 방법은, 그래서 당신은 단지 문제는 단순히 이미지 크기로 밝혀졌다 this.showModal 대신 this.showModal.bind(this, this.props.url) 및

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