提问者:小点点

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


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

已知如何修复以下错误(一个解决方案,另一个解决方案)

警告:无法对已卸载的组件执行React状态更新。这是一个no-op,但它表示应用程序中存在内存泄漏。要修复此问题,请取消useEffect清理函数中的所有订阅和异步任务。

但是,当组件刚刚被解除并且不再需要时,用“isUnmounted”检查来乱扔我的promise链似乎很奇怪。这是如何导致内存泄漏的?


共2个答案

匿名用户

这是如何导致内存泄漏的?

虽然不能保证,但这可能取决于卸载后导致您设置状态的原因。例如,如果有一个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内的匿名函数不能被垃圾收集,这反过来意味着这个不能被收集,因此组件将不得不永远挂在内存中。

匿名用户

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

它没有。

它表示应用程序内存泄漏。

在大多数情况下,您只需执行异步操作来更新组件状态,因此如果组件已卸载,则执行异步任务毫无意义。换言之:你是在浪费资源,根本没有效果。这是内存泄漏。

以下是一个例子:

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