疆括仕网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
React内存泄露常见问题解决方案
什么是内存泄露
- 程序的运行需要内存。只要程序提出要求，操作系统或者运行时(runtime)就必须供给内存。
- 对于持续运行的服务进程(daemon)，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。
- 不再用到的内存，没有及时释放，就叫做内存泄漏(memory leak)。
JavaScript 中常见的几种内存泄露
- 全局变量引起的内存泄漏
- function leaks(){
- leak = '***'; //leak 成为一个全局变量，不会被回收
- }
- var leaks = (function(){
- var leak = '***';// 被闭包所引用，不会被回收
- return function(){
- console.log(leak);
- }
- })()
- 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);
具体的示例
1. Demo1：
- 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，防止出现内存泄漏的情况
(1) 需要怎么解决啦?
添加如下代码即可：
- componentWillUnmount: function () {
- this.off('authChange', this.authChange);
- this.authChange = null;
- }
很明显这种情况就是在 dom 结构销毁的时候，事件却没有清除导致的内存泄漏，所以我们需要在componentWillUnmount的时候去清除挂载的方法
(2) react 内存泄露相关解释和解决方法
这里就提到了内存泄露，当我们在使用事件绑定，setInterval，setTimeOut 或一些函数的时候，但是却没有在组件销毁前清除的时候会造成内存泄露。这里我们手动的再componentWillUnmount去清除相关的方法即可。
2. Demo 2
下面这种就是常见的情况：
- this.pwdErrorTimer = setTimeout(() => {
- this.setState({
- showPwdError:false
- })
- }, 1000);
设置了一个timer延迟设置state，然而在延迟的这段时间，组件已经销毁，则造成此类问题
解决方法：
利用生命周期钩子函数：componentWillUnmount
- componentWillUnmount(){
- clearTimeout(this.pwdErrorTimer);
- clearTimeout(this.userNameErrorTimer);
- }
当前标题：React内存泄露常见问题解决方案
文章位置：https://tyhkzb.com/article/djiicsj.html
