React 18类组件可复用状态失效及Fast Refresh异常问题

问题原因 #

React 18的Fast Refresh功能主要针对函数组件（配合Hooks）优化，对类组件的支持有限：

• Fast Refresh更新类组件时，会重新创建组件实例，导致原实例的state和自定义实例属性（比如你定义的this.mounted）全部重置，所以触发Fast Refresh后statePrev为null，this.mounted也会回到初始的未定义状态。

解决方案 #

1. 实现类组件状态复用 #

由于类组件本身在Fast Refresh下无法保留实例状态，有两种可行方案：

• 状态提升到父组件：将需要复用的状态移到父函数组件中，通过props传递给子类组件。父函数组件在Fast Refresh时能保留状态，子类组件可以基于父组件的props更新自身状态。
• 使用全局状态管理：比如Redux、React Context，把需要持久化的状态放到全局存储中，类组件通过连接全局状态来获取和更新数据，不受组件实例重建的影响。
• （推荐）迁移到函数组件：函数组件配合useState、useRef能更好地兼容Fast Refresh，状态和引用在Fast Refresh时会被保留。

2. 避免重复执行fetch请求 #

不要依赖自定义的this.mounted实例属性，改用更可靠的方式控制请求触发：

• 基于状态判断：在componentDidMount中先检查this.state.data是否已有数据，只有当数据为空时才执行fetchData。
• 使用AbortController取消请求：在组件卸载（包括Fast Refresh导致的实例销毁）时取消未完成的请求，同时在componentDidMount中创建新的请求控制器，避免旧请求完成后更新已销毁实例的状态：

componentDidMount() {
  this.abortController = new AbortController();
  // 仅当无数据时请求
  if (!this.state.data?.length) {
    this.fetchData();
  }
}

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

fetchData() {
  fetch('/api/data', { signal: this.abortController.signal })
    .then(res => res.json())
    .then((data) => {
      this.setState((statePrev) => ({
        data: [...(statePrev.data || []), ...data]
      }));
    })
    .catch(err => {
      // 忽略取消请求的错误
      if (err.name !== 'AbortError') {
        console.error('Fetch error:', err);
      }
    });
}

内容的提问来源于stack exchange，提问作者i like Cola