自定义react hook 改变文档title

自定义react hook 改变文档title

import { useEffect, useRef} from "react";
export const useDocumentTitle = (
  title: string,
  keepOnUnmount: boolean = true
) => {
  // 最终使用useRef保存初始化的值 之后的渲染都不会变
  const oldTitle = useRef(document.title).current;
  // 页面加载时：oldTitle === 旧title 'jira任务管理系统'
  // 加载后： oldTitle === 新title
  //console.log("渲染时的oldTitle:", oldTitle);
  useEffect(() => {
    document.title = title;
  }, [title]);
  useEffect(() => {
    return () => {
      if (!keepOnUnmount) {
        // console.log("卸载时的oldTitle:", oldTitle);
        // 如果不指定依赖 读到的就是旧title
        document.title = oldTitle;
      }
    };
  }, [keepOnUnmount, oldTitle]);
};

使用

import {  useDocumentTitle } from "utils";
useDocumentTitle("项目列表", false);

效果：