本文介绍如何在 React 组件中动态修改 document.title，并在组件卸载时自动恢复默认标题，避免导航后残留自定义标题的问题。核心方案是利用 useEffect 的清理函数机制实现标题的“进入设置 + 离开重置”闭环。
本文介绍如何在 react 组件中动态修改 `document.title`，并在组件卸载时自动恢复默认标题，避免导航后残留自定义标题的问题。核心方案是利用 `useeffect` 的清理函数机制实现标题的“进入设置 + 离开重置”闭环。
在 React 单页应用（SPA）中，通过 document.title 动态更新浏览器标签页标题是一种常见需求。例如，在用户访问详情页时，根据 API 返回的数据设置个性化标题（如 "订单 #12345 | My App"）。但若仅在 useEffect 中单向赋值：
useEffect(() => {
const displayTitle = loadTitle(); // e.g., "用户详情 - 张三"
document.title = displayTitle;
}, []);该标题将永久滞留在当前浏览器标签中，即使用户点击路由链接跳转到其他页面（如首页或设置页），document.title 也不会自动还原——因为新页面并未执行 index.html 中的 <title></title> 声明（HTML 标题仅在首次加载时生效，后续路由切换不触发 HTML 重解析）。
✅ 正确解法：利用 useEffect 的清理函数（cleanup function），在组件即将卸载时主动重置标题：
useEffect(() => {
const displayTitle = loadTitle();
document.title = displayTitle;
// 清理函数：组件卸载时执行（如导航离开当前路由）
return () => {
// 方案一：恢复为 index.html 中的原始默认标题
document.title = "My Page Title";
// 方案二：清空（依赖浏览器默认行为，不推荐）
// document.title = "";
// 方案三：从全局配置读取默认值（更健壮）
// document.title = DEFAULT_PAGE_TITLE;
};
}, []);⚠️ 注意事项：
- 清理函数会在每次
useEffect重新执行前调用（若依赖项变化），以及组件卸载时调用。此处因依赖数组为空[]，故仅在卸载时触发一次。 -
不要依赖
document.title的初始值做重置（如const originalTitle = document.title;），因为在 SPA 中，多个组件可能先后修改标题，初始值已不可靠。 - 推荐将默认标题统一维护在常量中（如
const DEFAULT_PAGE_TITLE = "My Page Title";），确保所有重置逻辑一致，便于维护和国际化扩展。 - 若项目使用 React Router，也可结合
useLocation监听路由变化，实现更细粒度的标题控制；但对单组件生命周期内的标题管理，useEffect清理函数已足够简洁可靠。
总结：React 中页面标题不是“静态属性”，而是需显式管理的副作用状态。通过 useEffect 的清理机制，可精准实现“进入设值、离开还原”的语义，保障用户体验一致性与代码可维护性。
