是否需要在组件将卸载中卸载状态?

Question

我正在我的应用程序中执行服务器请求componentDidMount.所以我在componentDidMount内打电话给setState.我需要在componentWillUnmount内卸载此state吗？这是避免我的应用程序中内存泄漏的解决方案吗？请帮助我找到解决方案。谢谢！

示例代码

componentDidMount(){
fetch({ /* ... */ })
.then(res => res.json())
.then((responseData) => {
this.setState({
result: responseData.meta.data
})
})
}
componentWillUnmount(){
this.setState({
result:''
})
}

Answer 1

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

内存泄漏的原因是在某处使用了对对象(组件实例)的引用，这可以防止它被垃圾回收为未使用。

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

无法对未挂载的组件执行 React 状态更新。这是无操作，但它表示应用程序中存在内存泄漏。若要修复，请取消组件将卸载方法中的所有订阅和异步任务。

如果请求足够长，这将导致内存泄漏。为了避免这种情况，需要取消导致调用的请求或承诺setState。至于获取API请求，可以用AbortController来完成。

Answer 2

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

在组件中执行请求可能会发生的事情是，您的请求可以在再次卸载组件后完成。此时，您正在尝试对未挂载的组件执行 setState。此时，您将在主机中收到错误。 大多数HTTP库都提供取消请求的功能，这可以用来防止这种情况发生。来自 axios 库的一个例子在这里...

Answer 3

您不必担心在卸载时清理状态，因为上面的人已经强调了原因。

但是，如果您将附加到组件的侦听器保留为"未删除"，那么这可能是内存泄漏的候选者。componentDidMount()可以用作附加侦听器的地方，componentWillUnmount删除这些附加的侦听器。

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

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