React组件unmount（卸载）的触发时机与卸载后表现是什么？

unmount是React组件生命周期的最终阶段，指组件实例被从React维护的渲染树中完全移除的过程，不存在「组件渲染完成自动卸载」的逻辑。

unmount只会在特定场景下触发，和组件单次渲染完成没有关系，常见触发场景包括：

• 条件渲染结果变为false：比如父组件中写了{isShow && <Home />}，当isShow从true变为false时，Home组件会触发卸载
• 路由切换：单页应用路由跳转后，当前路由匹配的组件被新路由组件替换，原组件卸载
• 组件key值变更：父组件渲染时给当前组件传入的key属性发生变化，React会判定为旧组件需要卸载，重新挂载新key对应的同类型组件
• 根节点卸载：整个React应用通过根实例调用root.unmount()被整体卸载时，所有挂载的组件都会触发卸载

针对你日志里出现的「刚挂载就打unmounted日志」的特殊现象：
这是React 18及以上版本，开发环境开启<StrictMode>（严格模式）的默认校验行为，不是真实的业务卸载。严格模式会对首次挂载的组件执行一次「挂载→模拟卸载→重新挂载」的双执行流程，用来提前排查effect漏写清理逻辑、状态不一致的问题，这个模拟流程仅在开发环境存在，生产环境不会触发。

真实unmount流程会执行的操作 #

• 按声明顺序执行所有useEffect、useLayoutEffect返回的清理函数（也就是你代码里打印unmounted的回调）
• 清除组件内部维护的所有state、ref的引用关联
• 从虚拟DOM树中移除该组件节点
• 移除页面对应的真实DOM节点，组件渲染的内容会从页面上完全消失

你看到打印unmounted后页面仍显示内容的原因 #

你触发的是严格模式的模拟卸载，不是真实卸载。
这个模拟流程只会执行effect的清理函数做逻辑校验，不会真的操作DOM移除页面内容，执行完清理逻辑后会立刻重新执行组件渲染、重新跑effect的注册逻辑，对应你日志里unmounted之后马上又打印了一次inside useEffect，全程页面上的Hello World节点没有被删除，所以你能一直看到内容。

如果是真实业务场景触发的卸载，等清理函数执行完成后，组件对应的DOM会被直接移除，页面上不会再保留相关内容。

内容的提问来源于stack exchange，提问作者Aniket Kumar Paul