react中避免内存泄漏的方法

Posted 2020-12-29 luowenshuai

如果在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);      //清除定时器
}