如何将React前端DOM常见Hook封装示例改写成长尾词？

本文共计1309个文字，预计阅读时间需要6分钟。

目录 + 引用 + useFullscreen + useHover + useDocumentVisibility + 引用 + 本文字深入浅出 + ahooks + 源码系列文章的第十五篇，本系列的目标主要有以下几点：- 深入理解 React hooks。- 学习如何抽象自定义 hooks。

目录

• 引言
• useFullscreen
• useHover
• useDocumentVisibility

引言

本文是深入浅出 ahooks 源码系列文章的第十五篇，这个系列的目标主要有以下几点：

• 加深对 React hooks 的理解。
• 学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。
• 培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

上文指路：React前端DOM常见Hook封装示例上

本篇接着针对关于 DOM 的各个 Hook 封装进行解读。

useFullscreen

管理 DOM 全屏的 Hook。

该 hook 主要是依赖 screenfull 这个 npm 包进行实现的。

选择它的原因，估计有两个：

• 它的兼容性好，兼容各个浏览器的全屏 API。
• 简单，包体积小。压缩后只要 1.1 k。

大概介绍几个它的 API。

• .request(element, options?)。