切换到Vite后React组件渲染异常：需保存文件才更新状态

最近从create-react-app切换到vite后遇到一个奇怪的Bug：组件渲染会暂停，只有在VSCode中按CTRL+S保存文件时才会恢复。

相关代码 #

组件挂载逻辑 #

componentDidMount = async () => {
  await this.props.getEnvironment();
  if (this.props.environment.webSocketUrl === '') {
    logger.error('[Key] Could not get environment');
  } else {
    doSmth()
  }
}

this.props.getEnvironment()是generalRestActions中的方法，通过dispatch将environment存入Redux store。

Redux状态映射 #

const mapStateToProps = state => ({
  environment: state.general.environment,
});

组件导出方式：

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Component));

Bug表现 #

• 页面刷新后，Material UI开关处于「OFF」状态，但Redux store中的environment值已正确更新，组件却未重新渲染
• 按下CTRL+S保存文件后，渲染恢复，开关切换到「ON」状态
• 保存前，render()中打印store值显示正确，但开关仍为「OFF」；保存后组件才会根据store变更更新UI
• 其他组件存在同类问题：await REST请求后结果存入store，通过this.props.data获取时为undefined，仅添加componentDidUpdate才能正常获取

疑问 #

1. 为什么渲染会暂停？
2. 为什么props变更时componentDidMount不会再次触发？

问题解答 #

1. 渲染暂停的原因 #

这大概率是Vite的HMR（热模块替换）机制与Redux状态更新的兼容性问题，核心原因是Redux状态更新未触发组件重渲染：

• Vite与CRA的热更新实现逻辑不同，切换后可能出现Redux连接的组件未正确订阅状态变化的情况
• 若Redux reducer中直接修改原状态对象（而非返回新对象），React的浅比较会判定props未变化，从而不触发重渲染
• Vite开发环境的缓存或代码处理机制，可能导致组件未正确绑定store订阅，而保存文件触发HMR时会强制重建订阅关系，因此恢复渲染

2. componentDidMount不触发的原因 #

componentDidMount是React类组件的生命周期方法，仅在组件首次挂载时执行一次，props变更不会触发该方法：

• 组件挂载完成后，即使来自Redux的props发生变化，只会触发componentDidUpdate或重新执行render
• 此前在CRA中看似正常，可能是因为热更新时组件被重新挂载，而Vite的HMR是局部更新组件，不会触发componentDidMount

解决方案 #

1. 修复Redux reducer的状态更新逻辑：确保reducer返回新对象，而非修改原状态，示例：

   // 错误写法（直接修改原对象）
   state.general.environment = newEnv;
   return state;
   
   // 正确写法（返回新对象）
   return {
     ...state,
     general: {
       ...state.general,
       environment: newEnv
     }
   };
   

2. 改用函数组件+useSelector：React-Redux的useSelector能更可靠地监听状态变化，避免类组件connect可能出现的订阅问题
3. 调整Vite开发环境配置：尝试添加如下配置修复HMR或缓存问题：

   export default defineConfig({
     server: {
       hmr: { overlay: true },
       watch: { usePolling: true }
     }
   });
   

4. 临时兼容方案：若无法立即重构代码，可在componentDidUpdate中对比props变化，手动处理状态更新，但不推荐长期使用

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