如果在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); //清除定时器
}
原文：https://www.cnblogs.com/luowenshuai/p/9477980.html