useDocumentTitle

一个用于动态设置和管理文档标题的 React Hook。

功能特性

• ✅ 动态标题: 动态设置页面标题
• ✅ 自动恢复: 组件卸载时可选择恢复原标题
• ✅ 类型安全: 完整的 TypeScript 类型支持

基本用法

import useDocumentTitle from "./useDocumentTitle";

function PageComponent() {
  useDocumentTitle("新页面标题");

  return <div>页面内容</div>;
}

兼容性

• ✅ React 16.8+
• ✅ TypeScript 4.0+
• ✅ 现代浏览器

实现源码

查看 useDocumentTitle 的实现

import { useEffect, useRef } from "react";

//使用useRef改变页面标题
const useDocumentTitle = (title: string, keepOnUnmount: boolean = true) => {
  //页面内加载时： 旧title
  //加载后： 新title
  const oldTitle = useRef(document.title).current;

  useEffect(() => {
    document.title = title;
  }, [title]);

  useEffect(() => {
    return () => {
      if (!keepOnUnmount) {
        //如果不指定依赖， 读到的就是旧的title
        document.title = oldTitle;
      }
    };
  }, [oldTitle, keepOnUnmount]);
};

export default useDocumentTitle;