那些关于DOM的常见Hook封装，你知道几个？

本文目标主要有以下几点：,加深对 React hooks 的理解。,学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。,培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。,优雅的使用 addEventListener。,我们先来看看 addEventListener 的定义，以下来自 MDN 文档：,EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。,这里的 EventTarget 可以是一个文档上的元素 Element,Document和Window 或者任何其他支持事件的对象 (比如 XMLHttpRequest)。,我们看 useEventListener 函数 TypeScript 定义，通过类型重载，它对 Element、Document、Window 等元素以及其事件名称和回调参数都做了定义。,内部代码比较简单：,监听目标元素外的点击事件。,提到这个的应用场景，应该是模态框，点击外部阴影部分，自动关闭的场景。那这里它是怎么实现的呢？,首先它支持传递 DOM 节点或者 Ref，并且是支持数组方式。事件默认是支持 click，开发者可以自行传递并支持数组方式。,然后内部通过 document.addEventListener 监听事件。组件卸载的时候清除事件监听。,最后看 handler 函数，通过 event.target 获取到触发事件的对象 (某个 DOM 元素) 的引用，判断假如不在传入的 target 列表中，则触发定义好的 onClickAway 函数。,小结一下，useClickAway 就是使用了事件代理的方式，通过 document 监听事件，判断触发事件的 DOM 元素是否在 target 列表中，从而决定是否要触发定义好的函数。,常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装，支持自定义值转换和重置功能。,直接看代码，比较简单，其实就是监听表单的 onChange 事件，拿到值后更新 value 值，更新的逻辑支持自定义。,用于设置页面标题。,这个页面标题指的是浏览器 Tab 中展示的。通过 document.title 设置。,,代码非常简单，一看就会：,设置页面的 favicon。,favicon 指的是页面 Tab 的这个 ICON。,,原理是通过 link 标签设置 favicon。,