是否有必要在ComponentWillUnmount中卸载状态？

Question

我正在componentDidMount内的应用程序中执行服务器请求。因此，我正在setState内调用componentDidMount。是否需要在{{ 1}}？这是避免我的应用程序内存泄漏的解决方案吗？请帮助我找到解决方案。谢谢！

示例代码

state

Answer 1

不需要卸载状态。将result设置为空字符串并不比将其设置为任何其他值更好。

内存泄漏的原因是在某个地方使用了对对象（组件实例）的引用，这可以防止该对象作为未使用的对象被垃圾回收。

在这段代码setState中，由于未取消请求，因此可以在卸载组件后调用setState。这将导致警告：

  

无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

如果请求足够长，则将导致内存泄漏。为了避免这种情况，需要取消导致byte[]调用的请求或承诺。对于Fetch API请求，可以使用AbortController完成。

Answer 2

React会在卸载时清除组件的状态，因此您不必在componentWillUnmount上重置状态。

在组件中执行请求时可能发生的事情是，您的请求可以在 再次卸载后完成。那时，您正在尝试在未安装的组件上执行setState。届时，您将在控制台中收到一个错误。 大多数HTTP库都提供了取消请求的功能，可以用来防止这种情况的发生。 An example from the axios library here...

Answer 3

您无需担心在卸载时清理状态，因为上述人员已经强调了原因。

但是，如果您将未附加到组件的侦听器保留为“未删除”，则可能是内存泄漏的候选者。 componentDidMount()可以用作附加侦听器的位置，而componentWillUnmount可以用作除去附加的侦听器的位置。'

在Flux体系结构中，我们使用它们来附加和删除stores发出的事件的侦听器。

public componentDidMount() {
    sampleStore.addListener('sampleEventFired', this.oncatch);
}

public componentWillUnmount() {
    sampleStore.removeListener('sampleEventFired', this.oncatch);
}