本文介绍如何在 react 组件中动态设置 document.title，并在组件卸载（即用户导航离开）时自动恢复默认标题，避免标签页标题残留问题。
本文介绍如何在 react 组件中动态设置 document.title，并在组件卸载（即用户导航离开）时自动恢复默认标题，避免标签页标题残留问题。
在 React 单页应用（SPA）中，document.title 的手动修改虽简单直接，但容易引发状态残留问题：当某个页面通过 useEffect 动态设置了标题后，若用户通过前端路由跳转至其他页面，原设置的标题并不会自动还原——因为新页面可能未主动覆盖 document.title，导致浏览器标签页长期显示过期标题，影响用户体验与 SEO 一致性。
解决这一问题的核心在于利用 useEffect 的清理函数（cleanup function）机制。React 的 useEffect Hook 不仅支持副作用的执行，还允许返回一个函数，该函数会在组件即将卸载或下一次 effect 执行前被调用，非常适合用于资源清理和状态回滚。
以下是一个完整、健壮的实现示例：
import { useEffect } from 'react';
function ArticlePage() {
useEffect(() => {
// ✅ 页面加载时：获取并设置动态标题
const displayTitle = loadTitle(); // 假设此函数返回字符串，如 "React Hooks 深度解析 | My Site"
document.title = displayTitle;
// ? 清理函数：组件卸载时执行（即用户离开本页时）
return () => {
// 方案一：恢复为 index.html 中定义的默认标题（推荐）
document.title = 'My Page Title';
// 方案二：或清空（不推荐，可能导致空白标题）
// document.title = '';
// 方案三：从 document.head <title> 元素读取原始值（更通用）
// const defaultTitle = document.querySelector('head title')?.textContent || 'My Page Title';
// document.title = defaultTitle;
};
}, []); // 空依赖数组确保仅在挂载/卸载时触发
return <main>...</main>;
}
// 示例辅助函数（可根据实际逻辑替换）
function loadTitle(): string {
// 模拟异步或服务端返回的标题数据
return 'React Hooks 深度解析 | My Site';
}</title>
⚠️ 重要注意事项：
-
不要遗漏清理函数的返回：
return () => { ... }必须作为useEffect的直接返回值，不可包裹在条件语句或异步回调中； -
避免依赖未声明的变量：若
loadTitle依赖 props 或 state，请将其加入useEffect依赖数组，并同步更新清理逻辑（例如重置为对应上下文的默认值）； -
多级路由场景需全局兜底：若应用中存在多个动态标题页面，建议结合
useLocation（React Router v6+）或自定义 Hook 封装统一标题管理逻辑，防止不同页面清理逻辑冲突； -
SSR/SEO 友好性提醒：服务端渲染时
document对象不可用，务必在typeof window !== 'undefined'条件下操作标题，或使用next/head（Next.js）等框架专用方案。
总结而言，useEffect 的清理函数是 React 应用中管理副作用生命周期的黄金实践。通过合理设置「进入时赋值、离开时还原」的成对逻辑，不仅能精准控制页面标题，也为处理定时器、事件监听、WebSocket 连接等其他副作用提供了可复用的设计范式。
