react 内存泄露常见问题解决方案

写在前面

• 在写 react 代码的时候常常遇到以下的报错

Can't perform a React state update on an unmounted component. This is a no-op...... 复制代码

• 本篇文章首先回顾一下什么是内存泄露，而后看两个 demo 观察 react 出现内存泄露的具体状况。

什么是内存泄露

• 程序的运行须要内存。只要程序提出要求，操做系统或者运行时（runtime）就必须供给内存。

• 对于持续运行的服务进程（daemon），必须及时释放再也不用到的内存。不然，内存占用愈来愈高，轻则影响系统性能，重则致使进程崩溃。

• 再也不用到的内存，没有及时释放，就叫作内存泄漏（memory leak）。

JavaScript 中常见的几种内存泄露

• 全局变量引发的内存泄漏

function leaks(){  
    leak = '***'; //leak 成为一个全局变量，不会被回收
}
复制代码

• 闭包引发的内存泄漏

var leaks = (function(){  
    var leak = '***';// 被闭包所引用，不会被回收
    return function(){
        console.log(leak);
    }
})()
复制代码

• dom清空或删除时，事件未清除致使的内存泄漏

document.querySelector("#demo").addEventListener('click', myFunction);

var para1=document.querySelector("#demo");

para1.parentNode.removeChild(para1);

复制代码

若是咱们在没有取消 click 方法前去销毁了 para1 节点，就会形成内存泄露。

正确的作法：

document.querySelector("#demo").addEventListener('click', myFunction);

// 咱们须要在删除节点前清除挂载的 click 方法
document.querySelector("#demo").removeEventListener("click", myFunction);

var para1=document.querySelector("p1");

para1.parentNode.removeChild(para1);
复制代码

• 延展阅读，你们有空能够仔细的看看阮一峰老师的相关文章
• www.ruanyifeng.com/blog/2017/0… （阮一峰）

为了更加了解 react 的内存泄露问题看看下面几个 demo

Demo 1：

componentWillMount: function () {
    var onLogin = this.props.onLogin || function () {},
        onLogout = this.props.onLogout || function () {};

    this.on('authChange', function () {
      console.log('user authenticated:', this.state.isAuthenticated);
      return this.state.isAuthenticated
              ? onLogin(this.state)
              : onLogout(this.state);
    }.bind(this));
  },
复制代码

• 上面的例子是在 Stack Overflow 上看到的，楼主在componentWillMount的时候挂载了authChange事件，而后 react 出现了以下的报错：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method”

• 意思为：咱们不能在组件销毁后设置state，防止出现内存泄漏的状况

须要怎么解决啦？

• 添加以下代码便可

componentWillUnmount: function () {
      this.off('authChange', this.authChange);
      this.authChange = null;
  }
复制代码

很明显这种状况就是在 dom 结构销毁的时候，事件却没有清除致使的内存泄漏，因此咱们须要在componentWillUnmount的时候去清除挂载的方法

react 内存泄露相关解释和解决方法

• 这里就提到了内存泄露，当咱们在使用事件绑定，setInterval，setTimeOut 或一些函数的时候，可是却没有在组件销毁前清除的时候会形成内存泄露。这里咱们手动的再componentWillUnmount去清除相关的方法便可。

• why：

  • I would move your function into componentDidMount and add cleanup on componentWillUnmount
  • Important: componentWillMount is called on the server and client, but componentDidMount is only called on the client.
  • If you’re using eventListeners, setInterval or other functions that needs to be cleaned, put them in componentDidMount. The server will not call componentWillUnmount and is usually the cause of memory leaks.

• stackoverflow.com/questions/4…

Demo 2：

• 下面这种就是常见的状况：

this.pwdErrorTimer = setTimeout(() => {
    this.setState({
        showPwdError:false
    })
}, 1000);
复制代码

设置了一个timer延迟设置state，然而在延迟的这段时间，组件已经销毁，则形成此类问题

• 解决方法：
• 利用生命周期钩子函数：componentWillUnmount

componentWillUnmount(){
    clearTimeout(this.pwdErrorTimer);
    clearTimeout(this.userNameErrorTimer);
}
复制代码

若是引入了 react16.8+

• 咱们彻底可使用 useEffect() 函数解决大部份内存泄露的问题（官网-useEffect-文档）

文档中提到了两个重要的概念

为何要在 effect 中返回一个函数？

• 这是 effect 可选的清除机制。每一个 effect 均可以返回一个清除函数。如此能够将添加和移除订阅的逻辑放在一块儿。它们都属于 effect 的一部分。

React 什么时候清除 effect？

• React 会在组件卸载的时候执行清除操做。正如以前学到的，effect 在每次渲染的时候都会执行。这就是为何 React 会在执行当前 effect 以前对上一个 effect 进行清除。咱们稍后将讨论为何这将助于避免 bug以及如何在遇到性能问题时跳过此行为。

提示

若是你熟悉 React class 的生命周期函数，你能够把 useEffect Hook 看作 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

衍生阅读

关于 promise 请求是否会形成内存泄露的问题

一、Does never resolved promise cause memory leak?

• Does never resolved promise cause memory leak?
• 原问题在上面，能够看看

二、Memory leaks in loops with Promise ?

• 循环一个 promise 形成内存泄露？