React前端DOM常见Hook封装示例下
目录
- 引言
- 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?)。使一个元素全屏显示。默认元素是
<html> - .exit()。退出全屏。
- .toggle(element, options?)。假如目前是全屏，则退出，否则进入全屏。
- .on(event, function)。添加一个监听器，用于当浏览器切换到全屏或切换出全屏或出现错误时。event 支持 'change' 或者 'error'。另外两种写法：
.onchange(function)和.onerror(function)。 - .isFullscreen。判断是否是全屏。
- .isEnabled。判断当前环境是否支持全屏。
来看该 hook 的封装：
首先是 onChange 事件中，判断是否是全屏，从而触发进入全屏的函数或者退出全屏的函数。 当退出全屏的时候，卸载 change 事件。
const { onExit, onEnter } = options || {};
// 退出全屏触发
const onExitRef = useLatest(onExit);
// 全屏触发
const onEnterRef = useLatest(onEnter);
const [state, setState] = useState(false);
const onChange = () => {
if (screenfull.isEnabled) {
const { isFullscreen } = screenfull;
if (isFullscreen) {
onEnterRef.current?.();
} else {
screenfull.off('change', onChange);
onExitRef.current?.();
}
setState(isFullscreen);
}
};
手动进入全屏函数，支持传入 ref 设置需要全屏的元素。并通过 screenfull.request 进行设置，并监听 change 事件。
// 进入全屏
const enterFullscreen = () => {
const el = getTargetElement(target);
if (!el) {
return;
}
if (screenfull.isEnabled) {
try {
screenfull.request(el);
screenfull.on('change', onChange);
} catch (error) {
console.error(error);
}
}
};
退出全屏方法，调用 screenfull.exit()。
// 退出全屏
const exitFullscreen = () => {
if (!state) {
return;
}
if (screenfull.isEnabled) {
screenfull.exit();
}
};
最后通过 toggleFullscreen，根据当前状态，调用上面两个方法，达到切换全屏状态的效果。
useHover
监听 DOM 元素是否有鼠标悬停。
主要实现原理是监听 mouseenter 触发 onEnter 事件，切换状态为 true，监听 mouseleave 触发 onLeave 事件，切换状态为 false。代码简单，如下：
export default (target: BasicTarget, options?: Options): boolean => {
const { onEnter, onLeave } = options || {};
const [state, { setTrue, setFalse }] = useBoolean(false);
// 通过监听 mouseenter 判断有鼠标悬停
useEventListener(
'mouseenter',
() => {
onEnter?.();
setTrue();
},
{
target,
},
);
// mouseleave 没有鼠标悬停
useEventListener(
'mouseleave',
() => {
onLeave?.();
setFalse();
},
{
target,
},
);
return state;
};
useDocumentVisibility
监听页面是否可见。
这个 hook 主要使用了 Document.visibilityState 这个 API。先简单看下这个 API：
Document.visibilityState （只读属性）, 返回document的可见性， 即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后， 或是不可见的隐藏的标签页，或者 (正在) 预渲染。可用的值如下：
- 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化。
- 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' 。
- 'prerender' : 页面此时正在渲染中，因此是不可见的。文档只能从此状态开始，永远不能从其他值变为此状态。
典型用法是防止当页面正在渲染时加载资源，或者当页面在背景中或窗口最小化时禁止某些活动。
最后看这个 hook 的实现就很简单了：
- 通过 document.visibilityState 判断是否可见。
- 通过 visibilitychange 事件，更新结果。
const getVisibility = () => {
if (!isBrowser) {
return 'visible';
}
// Document.visibilityState （只读属性）, 返回document的可见性， 即当前可见元素的上下文环境。
return document.visibilityState;
};
function useDocumentVisibility(): VisibilityState {
const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());
useEventListener(
// 监听该事件
'visibilitychange',
() => {
setDocumentVisibility(getVisibility());
},
{
target: () => document,
},
);
return documentVisibility;
}
以上就是React前端DOM常见Hook封装示例下的详细内容，更多关于React前端 DOM Hook 封装的资料请关注我们其它相关文章！
相关推荐
-
详解React 如何防止 XSS 攻击论$$typeof 的作用
目录 JSX XSS 攻击 防止 XSS 攻击的方法 React 对于文本节点的处理 dangerouslySetInnerHTML 处理富文本节点 $$typeof 的作用 JSX 先来简单复习一下 JSX 的基础知识.JSX 是React.createElement的语法糖 <div id="container">hello</div> 经过 babel 编译后: React.createElement( "div" /* type */
-
在React中应用SOLID原则的方法
目录 1.单一职责原则(SRP) 2.开放封闭原则(OCP) 3.里氏替换原则(LSP) 4.接口隔离原则(ISP) 5.依赖倒置原则(DIP) 6.小结 在面向对象编程(OOP)中,SOLID 原则是设计模式的基础,它的每个字母代表一种设计原则: 单一职责原则(SRP) 开放封闭原则(OCP) 里氏替换原则(LSP) 接口隔离原则(ISP) 依赖倒置原则(DIP) 下面就来看看每个原则的含义以及如何在 React 中应用 SOLID 原则! 1.单一职责原则(SRP) 单一职责原则的定义是每个
-
Vue3中ref和reactive的基本使用及区别详析
目录 前言 ref—计数器案例 reactive—计数器案例 区别 类似使用ref 类似使用 reactive 附:ref和reative的使用心得 总结 前言 今天给大家讲一下在vue3中ref和reactive的使用方法,以及他们的使用区别在哪里,下面通过一个简单的计数器的例子来给大家进行说明 ref—计数器案例 ref 主要用于基本类型的响应,看如下代码: import { ref } from 'vue' // 导入ref interface DataProps { count: num
-
如何应用 SOLID 原则在 React 中整理代码之开闭原则
目录 本系列其他文章 什么是开闭原则? 让我们从一个例子开始 一个糟糕的解决方案 解决方案是什么? 让我们创建单独的用户组件 注意 总结 SOLID 是一套原则.它们主要是关心代码质量和可维护性的软件专业人员的指导方针. React 不是面向对象,但这些原则背后的主要思想可能是有帮助的.在本文中,我将尝试演示如何应用这些原则来编写更好的代码. 在前一篇文章中,我们讨论了单一责任原则.今天,我们将讨论 SOLID 的第二个原则: 开闭原则. 本系列其他文章 如何应用 SOLID 原则在 React
-
教你应用 SOLID 原则整理 React 代码之单一原则
目录 什么是单一责任原则? 让我们从一个糟糕的例子开始 1. 移动数据处理逻辑 2. 可重用的数据获取钩子 3. 分解 UI 组件 让我们回顾一下我们刚刚做了什么 总结 SOLID 原则的主要是作为关心自己工作的软件专业人员的指导方针,那些以经得起时间考验的设计精美的代码库为荣的人. 今天,我们将从一个糟糕的代码示例开始,应用 SOLID 的第一个原则,看看它如何帮助我们编写小巧.漂亮.干净的并明确责任的 React 组件,. 什么是单一责任原则? 单一责任原则告诉我们的是,每个类或组件应该有一
-
React手写一个手风琴组件示例
目录 知识点 结构分析 AccordionItem子组件 Accordion容器组件 知识点 emotion语法 react语法 css语法 typescript类型语法 结构分析 根据上图,我们来分析一下,一个手风琴组件应该包含一个手风琴容器组件和多个手风琴子元素组件.因此,假设我们实现好了所有的逻辑,并写出使用demo,那么代码应该如下: <Accordion defaultIndex="1" onItemClick={console.log}> <Accordi
-
React前端DOM常见Hook封装示例下
目录 引言 useFullscreen useHover useDocumentVisibility 引言 本文是深入浅出 ahooks 源码系列文章的第十五篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 上文指路:React前端DOM常见Hook封装示例上 本篇接着针对关于 DOM 的各个 Hook 封装进行解读. useF
-
React前端DOM常见Hook封装示例上
目录 引言 useEventListener useClickAway useEventTarget useTitle useFavicon 引言 本文是深入浅出 ahooks 源码系列文章的第十四篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是
-
列表页常见hook封装实例
目录 引言 列表页常见元素 usePagination useAntdTable 引言 本文是深入浅出 ahooks 源码系列文章,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 列表页常见元素 对于一些后台管理系统,典型的列表页包括筛选表单项.Table表格.Pagination分页这三部分. 针对使用 Antd 的系统,在 a
-
React Hook用法示例详解（6个常见hook）
1.useState:让函数式组件拥有状态 用法示例: // 计数器 import { useState } from 'react' const Test = () => { const [count, setCount] = useState(0); return ( <> <h1>点击了{count}次</h1> <button onClick={() => setCount(count + 1)}>+1</button> &l
-
react中常见hook的使用方式
1.什么是hook? react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state.ref.生命周期等属性. 2.为什么要出现hook? 函数式组件是全局当中一个普通函数,在非严格模式下this指向window,但是react内部开启了严格模式,此时this指向undefined,无法像类式组件一样使用state.ref,函数式组件定义的变量都是局部的,当组件进行更新时会重新定义,也无法存储,所以在hook出现之前,函数式组件有很大的局限性,通常情况下都会使
-
Composition Api封装业务hook思路示例分享
目录 前序 hook的场景 useGetJobList 共同 思路历程 心得 utils 和 hook 的区别 总结 前序 近期公司的新项目一个小程序,一直想尝试 Vue3 开发项目,苦于自己的驱动力不行,学的零零碎碎的.因此小程序我直接跟项目组长说我要使用 uniapp 的 Vue3 版进行开发.开发中遇到业务场景相同的,就分装了一个hook 来减少代码,易于维护. hook的场景 这种获取列表的需求很常见吧,在我这个小程序中有3处使用到了获取列表的功能.分别是: 我的收藏.已投递岗位.未投递
-
Vue封装远程下拉框组件的实现示例
之前封装了一个远程搜索的输入框,静态在Vue官网看到一个类似的远程搜索下拉框,今天也封装一个远程搜索下拉框,面对不同的需求 我们修改了官方提供的代码来封装了 父组件 RemoteSearch.vue <template> <el-row> <el-select v-if="chooseFlag ==0" v-model="selectKey" :multiple="false" :filterable="t
-
30行代码实现React双向绑定hook的示例代码
目录 使用Proxy代理数据 使用useRef创建同一份数据引用 添加更新handler 去除多次Proxy 添加缓存完善代码 总结 Sandbox 示例 Vue和MobX中的数据可响应给我们留下了深刻的印象,在React函数组件中我们也可以依赖hooks来实现一个简易好用的useReactive. 看一下我们的目标 const CountDemo = () => { const reactive = useReactive({ count: 0, }); return ( <div onCl
-
使用React-Router实现前端路由鉴权的示例代码
React-Router 是React生态里面很重要的一环,现在React的单页应用的路由基本都是前端自己管理的,而不像以前是后端路由,React管理路由的库常用的就是就是 React-Router .本文想写一下 React-Router 的使用,但是光介绍API又太平淡了, 而且官方文档已经写得很好了 ,我这里就用一个常见的开发场景来看看 React-Router 是怎么用的吧.而我们一般的系统都会有用户访问权限的限制,某些页面可能需要用户具有一定的权限才能访问.本文就是用 React-Ro
-
React useEffect不支持async function示例分析
目录 引言 React为什么这么设计呢? 简单改造 1.简单改造的写法(不推荐) 2.把异步提取成单独函数或自定义hook(推荐) 引言 useEffect相比大家都耳熟能详啦,如下这种写法,应该是非常常见的需求. useEffect(async () => { await getPoiInfo(); // 请求数据 }, []); 但是 React 本身并不支持这么做,理由是 effect function 应该返回一个销毁函数(effect:是指return返回的cleanup函数),如果