持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

今天开始一起学习分享 ahooks 的源码

ahooks是阿里巴巴出品的一套高质量可靠的 React Hooks 库

今天分享 第4个 hooks-useDocumentVisibility

useDocumentVisibility

首先看下 useDocumentVisibility 的作用是什么

useDocumentVisibility的作用是监听页面是否可见

接下来 看下 API

API

const documentVisibility = useDocumentVisibility();

Result

参数	说明	类型
documentVisibility	判断 document 是否在是否处于可见状态	visible| hidden | prerender | undefined

一共只有1个返回结果

documentVisibility： 是个 boolean值，作用是判断 document 是否在是否处于可见状态，如果documentVisibility为true，则document处于可见状态，如果documentVisibility为false，则document处于不可见状态

接下来 看下 用法

基本用法

监听 document 的可见状态

import React, { useEffect } from 'react';
import { useDocumentVisibility } from 'ahooks';

export default () => {
  const documentVisibility = useDocumentVisibility();

  useEffect(() => {
    console.log(`Current document visibility state: ${documentVisibility}`);
  }, [documentVisibility]);

  return <div>Current document visibility state: {documentVisibility}</div>;
};

接下来一起看下 源码

源码

1.首先引入 useEventListener 这个 Hooks，用来监听 visibilitychange 这个事件

import useEventListener from '../useEventListener';

2.使用JavaScript提供的Document.visibilityState，visibilityState有3个状态值

• 'visible' : 此时页面内容至少是部分可见。即此页面在前景标签页中，并且窗口没有最小化。
• 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
• 'prerender' : 页面此时正在渲染中，因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态。注意：浏览器支持是可选的

3.通过上面3个值，定义最后返回的结果类型

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

4.首先定义初始值

const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());

5.在这里通过getVisibility函数，来决定初始值,如果isBrowser不是在浏览器页面则返回 visible，否则返回document.visibilityState

const getVisibility = () => {
  if (!isBrowser) {
    return 'visible';
  }
  return document.visibilityState;
};

6.通过useEventListener来监听visibilitychange函数，通过setDocumentVisibility来改变documentVisibility

useEventListener(
    'visibilitychange',
    () => {
      setDocumentVisibility(getVisibility());
    },
    {
      target: () => document,
    },
  );

7.最后返回documentVisibility值

return documentVisibility;

其他hooks

useLatest

useEventListener

useClickAway