Javascript 是否需要在ComponentWillUnmount中卸载状态？

我在

componentDidMount

内执行应用程序中的服务器请求。因此我在

componentDidMount

内调用

setState

。是否需要在

componentWillUnmount

内卸载此

state

？这是避免应用程序内存泄漏的解决方案吗？请帮助我找到解决此问题的解决方案这个，谢谢

示例代码

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

componentWillUnmount(){
  this.setState({
    result:''
  })
}

---

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

在组件中执行请求时可能发生的情况是，在再次卸载组件后，可以完成请求。此时，您正试图对未安装的组件执行setState。此时，您将在控制台中收到一个错误。

---

大多数HTTP库提供取消请求的功能，这可以用来防止这种情况发生

不需要卸载状态。将

result

设置为空字符串并不比将其设置为任何其他值好

内存泄漏的原因是在某处使用了对对象（组件实例）的引用，这会防止它被垃圾收集为未使用的对象

在这段代码中，可以在卸载组件后调用

setState

，因为请求没有取消。这将导致警告：

无法对未安装的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务

---

如果请求足够长，这将导致内存泄漏。为了避免这种情况，需要取消导致

setState

调用的请求或承诺。至于获取API请求，可以使用。

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

但是，如果您将附加到组件的侦听器保留为“未移动”，则可能会导致内存泄漏。

componentDidMount（）

可以用作附加侦听器的位置，

componentWillUnmount

可以删除附加的侦听器

在

Flux

体系结构中，我们使用它们为

存储发出的事件附加和删除侦听器

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

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

卸载时组件状态将自动清除，因此您不需要在
componentWillUnmount
中使用
setState
。但是，如果您使用了一些
timeout
函数，则必须在卸载组件之前清除它们。