useDocumentVisibility

作用

监听页面是否可见

原理

这个 hook 主要使用了 Document.visibilityState 这个 API，这个 API 有四个值，分别是 hidden、visible、prerender、undefined，分别代表隐藏、可见、预渲染、未定义。

源码

import { useState } from 'react'
import useEventListener from '../useEventListener'
import isBrowser from '../utils/isBrowser'

type VisibilityState = 'hidden' | 'visible' | 'prerender' | undefined

// 获取当前页面的可见状态
const getVisibility = () => {
  // 如果不是浏览器环境，直接返回 visible
  if (!isBrowser) {
    return 'visible'
  }
  // 如果是浏览器环境，返回 document.visibilityState
  return document.visibilityState
}

function useDocumentVisibility(): VisibilityState {
  // 保存当前页面的可见状态
  const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility())

  // 监听页面的可见状态
  useEventListener(
    'visibilitychange',
    () => {
      // 设置当前页面的可见状态
      setDocumentVisibility(getVisibility())
    },
    {
      target: () => document,
    },
  )

  // 返回当前页面的可见状态
  return documentVisibility
}

export default useDocumentVisibility