React：如何在ComponentWillUnmount中正确处理状态避免内存泄漏？

1. 父组件卸载时无需手动重置state #

组件卸载后，整个组件实例（包含其state）会被JavaScript引擎标记为垃圾回收对象，只要没有外部引用持有这些数据，内存就会被自动释放——不管state数据量多大，都不会因此导致内存泄漏。手动重置state属于完全多余的操作。

2. componentWillUnmount内调用setState的做法不正确 #

当组件进入componentWillUnmount生命周期时，已处于即将卸载的状态，此时调用setState：

• React会直接忽略该状态更新操作，不会触发组件重渲染；
• 大概率会触发React的警告（提示无法在已卸载组件上更新状态）；
• 没有实际意义，反而会增加不必要的性能开销。

3. 真正需要防范的内存泄漏点：未完成的异步请求 #

你的代码里最大的内存泄漏风险来自fetch请求：如果父组件卸载时请求还未完成，后续then回调依然持有组件实例的this引用，回调执行时调用setState就会导致内存泄漏。

正确处理方式： #

方式一：用标志位判断组件挂载状态

componentDidMount(){
  this.isMounted = true;
  fetch({ /* ... 请求配置 */ })
    .then(res => res.json())
    .then((responseData) => {
      // 仅组件挂载时更新状态
      if (this.isMounted) {
        this.setState({
          result: responseData.meta.data
        })
      }
    })
    .catch(err => {
      if (this.isMounted) {
        // 处理错误逻辑
      }
    })
}

componentWillUnmount(){
  this.isMounted = false;
}

方式二：用AbortController取消请求（更规范）

这是浏览器原生支持的取消fetch请求的方式，能直接终止未完成的请求，避免后续回调执行：

componentDidMount(){
  this.abortController = new AbortController();
  fetch({ 
    /* ... 请求配置 */,
    signal: this.abortController.signal // 绑定取消信号
  })
    .then(res => res.json())
    .then((responseData) => {
      this.setState({
        result: responseData.meta.data
      })
    })
    .catch(err => {
      // 忽略主动取消请求的错误
      if (err.name !== 'AbortError') {
        // 处理其他错误
      }
    })
}

componentWillUnmount(){
  this.abortController?.abort();
}

内容的提问来源于stack exchange，提问作者John Glabb