react中避免內存泄漏的方法

如果在react組件中設置了定制器或者在dom上綁定了事件，卸載組件時未清除定時器或未清除事件都會導致內存泄漏

例如下面代碼：<button onClick={ReactDOM.unmountComponentAtNode.bind(this,document.getElementById('root'))}>強制卸載</button>（此方法可以強制卸載組件）

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
class App extends Component{
    constructor(props){
        super(props);
        this.state={
            opa:0
        }
    }
    componentDidMount(){   //組件掛載完成后執行的鈎子函數
        this.refs.btn.onclick=()=>{  //給dom綁定事件
            alert('btn');
        }
        var opa = this.state.opa;
        this.timer = setInterval(()=>{  //設置定時器
            console.log(opa);     //如果卸載組件時沒有清除定時器就會一直輸出
            opa+=0.1;
            if(opa >= 1){
                opa = 0;
            }
            this.setState({
                opa
            })
        }, 300);
    }
    render(){
        return (<div className='app'>
            <h1 style={{opacity:this.state.opa}}>HELLO WORLD</h1>
            <button onClick={ReactDOM.unmountComponentAtNode.bind(this,document.getElementById('root'))}>強制卸載</button>
            <button ref="btn">彈出</button>
        </div>)
    }
}
export default App;

效果圖：

點擊“強制卸載”，雖然組件被卸載了但是定時器和事件沒有清除導致內存泄露，此時控制台會一直輸出。

解決辦法：我們可以利用鈎子函數：componentWillUnmount() 進行定時器和事件的清除，添加如下代碼：

componentWillUnmount(){     //卸載組件前執行的鈎子函數
    this.refs.btn.onclick = null;  //清除dom上綁定的事件
    clearInterval(this.timer);      //清除定時器
}