【ahooks源码系列解读】（开篇）如何获取和监听DOM元素

前言由于工作中写了很多自定义Hook场景，在实现一个通用的场景功能时，可能没有想到已经有了实现了的Hook封装或者我什至不想从Hooks库中找，但是社区好的实现可以提高开发效率，降低bug率。公司项目中有一个依赖库ahooks，但是我用的次数不多，所以有打算深入学习ahooks，主要是为了更加熟练的提取和实现一些场景的Hooks，学习如何更好的自定义钩子。我打算开始阅读ahooks的源代码。学习ahooks源码的好处在我看来，学习ahooks常用Hooks封装有以下好处：熟悉如何根据需要提取对应的Hooks，封装通用逻辑，讲解源码实现思路，提炼核心实现，学习自定义Hooks通过学习源码最佳实践深入学习特定场景下的Hooks，在项目开发中通俗易懂，使用起来更得心应手关于源码系列本系列文章基于ahooksv3.7.4版本，以及关于ahooks源码解读陆续输出。按照ahooks官网的分类，我先从DOM章节说起。DOM章节包含的Hooks如下：useEventListener：优雅使用addEventListener。useClickAway：监听目标元素外的点击事件。useDocumentVisibility：addEventListener的优雅使用。useDrop&useDrag：处理元素拖动的钩子。useEventTarget：常用表单控件的OnChange和取值逻辑封装（通过e.target.value获取表单值），支持自定义值转换和重置功能。useExternal：动态注入JS或CSS资源，useExternal可以保证资源全局唯一。useTitle：用于设置页面标题。useFavicon：设置页面的favicon。useFullscreen:钩子来管理DOM全屏。useHover：监听DOM元素是否被鼠标悬停。useMutationObserver：一个Hook，用于监视指定DOM树的变化。useInViewport：观察元素是否在可见区域，以及元素的可见比例。useKeyPress：监听键盘按键，支持组合键，支持按键别名。useLongPress：监听目标元素的长按事件。useMouse：监听鼠标位置。useResponsive：获取响应信息。useScroll：监听元素的滚动位置。useSize：一个监听DOM节点大小变化的Hook。useFocusWithin：监听当前焦点是否在某个区域内，同css属性：focus-within。由于内容量大，DOM文章会分成几篇输出，这样每篇文章阅读起来不会太费时间，可以快速阅读。文章在解读源码的基础上，也会带出涉及到的JS基础知识。在学习源码的过程中，还可以查漏补缺。回到本文的正题，在查看DOM类下的Hooks时，发现使用较多的是getTargetElement方法和useEffectWithTarget内部的Hook，所以在说源码之前先了解一下这两个Hooks。DOM类Hooks使用规范中提到了如何获取DOM元素的三种类型的目标：ahooks大多数DOM类Hooks都会收到target参数，表示要处理的元素。target支持三种类型React.MutableRefObject,HTMLElement,()=>HTMLElement。React.MutableRefObjectexportdefault()=>{constref=useRef(null)constisHovering=useHover(ref)返回{isHovering?'hover':'leaveHover'}