useTitle

作用

用于设置页面标题。

原理

通过 useEffect 监听 title 的变化，当 title 变化时，更新 document.title。

源码

import { useEffect, useRef } from 'react'
import useUnmount from '../useUnmount'
import isBrowser from '../utils/isBrowser'

export interface Options {
  restoreOnUnmount?: boolean
}

const DEFAULT_OPTIONS: Options = {
  restoreOnUnmount: false,
}

function useTitle(title: string, options: Options = DEFAULT_OPTIONS) {
  // 保存当前页面的标题
  const titleRef = useRef(isBrowser ? document.title : '')

  // 监听标题的变化
  useEffect(() => {
    document.title = title
  }, [title])

  // 组件卸载时，如果配置了 restoreOnUnmount，恢复原来的标题
  useUnmount(() => {
    if (options.restoreOnUnmount) {
      document.title = titleRef.current
    }
  })
}

export default useTitle