zoukankan      html  css  js  c++  java
  • 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);      //清除定时器
    }
  • 相关阅读:
    20000+关注,开源两本硬核的原创电子书!
    Tail Latency学习
    Zabbix5.0 监控redis
    JAVA多线程(九) ForkJoin框架
    JAVA多线程(八) Condition源码分析
    程序员英语学习(二) 标点符号对应的英语单词汇总
    linux shell快速入门
    Ubuntu常用指令和快捷键汇总
    Win10常用快捷键汇总
    算法路漫漫(三) 荷兰国旗
  • 原文地址:https://www.cnblogs.com/luowenshuai/p/9477980.html
Copyright © 2011-2022 走看看