Ahooks 是怎么处理 DOM 的？

本篇文章探讨一下 ahooks 对 DOM 类 Hooks 使用规范，以及源码中是如何去做处理的。,这一章节，大部分参考官方文档的 DOM 类 Hooks 使用规范[1]。,第一点，ahooks 大部分 DOM 类 Hooks 都会接收 target 参数，表示要处理的元素。,target 支持三种类型 React.MutableRefObject（通过 useRef 保存的 DOM）、HTMLElement、() => HTMLElement（一般运用于 SSR 场景）。,第二点，DOM 类 Hooks 的 target 是支持动态变化的。如下所示：,那 ahooks 是怎么处理这两点的呢？,获取到对应的 DOM 元素，这一点主要兼容以上第一点的入参规范。,这个方法，主要是为了支持第二点，支持 target 动态变化。,其中 packages/hooks/src/utils/useEffectWithTarget.ts 是使用 useEffect。,另外 其中 packages/hooks/src/utils/useLayoutEffectWithTarget.ts 是使用 useLayoutEffect。,两者都是调用的 createEffectWithTarget，只是入参不同。,直接重点看这个 createEffectWithTarget 函数：,一个优秀的工具库应该有自己的一套输入输出规范，一来能够支持更多的场景，二来可以更好的在内部进行封装处理，三来使用者能够更加快速熟悉和使用相应的功能，能做到举一反三。