未安装组件的状态更新如何导致内存泄漏？

Question

更新未安装组件的状态如何导致内存泄漏？

已知如何修复以下错误(, )

Warning: 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 a useEffect cleanup function.

但是，当组件刚刚被关闭并且不再需要时，用 "isUnmounted" 检查乱丢我的承诺链似乎很奇怪。这怎么会导致内存泄漏？

Answer 1

How does this cause a memory leak?

不能保证，但这可能取决于导致您在卸载后设置状态的原因。例如，如果您有一个 setInterval 在卸载后继续运行，则该函数及其闭包中的任何变量都不能被垃圾回收。

class ExampleComponent extends React.Component {
  state: { seconds: 0 }
  componentDidMount() {
   setInterval(() => {
     this.setState(prev => ({
       seconds: prev.seconds + 1;
     });
   }, 1000);
  }
  // No clearing the interval in componentWillUnmount
}

上面的代码中，set interval里面的匿名函数不能被垃圾回收，也就意味着this不能被回收，所以组件将永远挂在内存中。

Answer 2

How does updating the state of an unmounted component cause a memory leak?

没有。

it indicates a memory leak in your application.

在大多数情况下，您只是执行异步操作来更新组件状态，因此如果卸载了组件，则执行异步任务根本没有意义。换句话说：您毕竟是在浪费资源而没有任何效果。那是内存泄漏。

这是一个例子：

 setInterval(() => { // If the component unmounted, this is a waste of ressources
    component.setState(({ count }) => ({ count: count + 1 }));
 }, 10);

未安装组件的状态更新如何导致内存泄漏？

How does a state update on an unmounted component cause a memory leak?

javascript

memory-leaks

reactjs