componentWillUnmount提前触发问题咨询：组件未卸载却打印unmounting

你遇到的这种mounted → unmounting → mounted日志顺序，主要有两种常见原因：

开发环境下React StrictMode的检测行为 #

如果你的应用在开发模式中使用了<StrictMode>包裹根组件，React会刻意重复执行部分生命周期方法，用来帮你排查未妥善清理的副作用（比如未清除的定时器、订阅）。

这种情况下，React会先挂载组件（打印mounted），然后立刻模拟卸载（打印unmounting），接着再重新挂载一次（再次打印mounted）。注意这只是开发环境的调试行为，生产环境不会出现这个现象。

组件实例被销毁后重新创建 #

如果父组件渲染ClassComponent时出现以下情况，会导致旧组件实例被销毁、新实例被创建：

• 组件的key属性发生了变化（React通过key识别组件身份，key变了就会认为是新组件）
• 父组件的条件渲染逻辑导致组件先被从DOM中移除，紧接着又重新渲染（比如条件表达式先为false再变为true）

这种场景下，旧组件触发componentWillUnmount，新组件触发componentDidMount，也会出现你看到的日志顺序。

快速验证方法 #

1. 临时移除根组件外的<StrictMode>标签，查看日志是否变为只打印一次mounted
2. 检查父组件中渲染ClassComponent的代码，确认是否有key变化或条件切换导致组件反复挂载的逻辑

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