在 React 单页应用中，通过 useEffect 动态设置 document.title 后，若不手动清理，标题会持续保留导致跨路由显示异常；本文介绍利用 useEffect 清理函数自动恢复默认标题的规范做法。
在 react 单页应用中，通过 `useeffect` 动态设置 `document.title` 后，若不手动清理，标题会持续保留导致跨路由显示异常；本文介绍利用 useeffect 清理函数自动恢复默认标题的规范做法。
在 React 应用中，使用 useEffect 修改 document.title 是常见的页面 SEO 与用户体验优化手段。例如，在某个详情页中根据 API 返回数据动态设置标题：
useEffect(() => {
const displayTitle = loadTitle(); // 如：`"用户详情 - 张三 | My App"`
document.title = displayTitle;
}, []);
该逻辑在组件挂载时生效，效果良好。但问题在于：当用户点击链接跳转至其他路由（如 /home 或 /about）时，当前组件卸载，而 document.title 并未被还原——它仍保持上一个页面设置的值，直到手动刷新浏览器。这是因为 React 不会自动管理 DOM 全局状态（如 document.title），需开发者显式清理。
✅ 正确解法是利用 useEffect 的清理函数（cleanup function）：在组件卸载前执行还原逻辑。React 保证该函数会在下一次 effect 执行前、或组件卸载时被调用。
useEffect(() => {
const displayTitle = loadTitle();
document.title = displayTitle;
// 清理函数：组件卸载时执行
return () => {
// 方案一：恢复为 index.html 中的原始默认标题
document.title = "My Page Title";
// 方案二（推荐）：复位为项目约定的全局默认值（可抽离为常量）
// document.title = DEFAULT_PAGE_TITLE;
};
}, []);
⚠️ 注意事项：
- 清理函数必须是同步执行的纯函数，不可包含异步操作（如
await）或副作用延迟； - 若页面存在多个动态标题设置逻辑（如嵌套布局、子组件也修改 title），建议统一由顶层路由组件或自定义 Hook（如
useDocumentTitle）管理，避免冲突； - 为提升可维护性，推荐将默认标题提取为常量（如
const DEFAULT_TITLE = "My Page Title";），并在所有重置点统一引用； - 在服务端渲染（SSR）场景中，还需确保服务端初始 title 与客户端一致，避免水合警告。
总结：useEffect 的返回函数是 React 提供的关键生命周期协调机制。对任何副作用（如事件监听、定时器、document.title、localStorage 写入等），都应遵循“设置 → 清理”配对原则。仅设置而不清理，不仅引发标题残留问题，还可能造成内存泄漏或状态污染——养成清理习惯，是编写健壮 React 应用的基本功。
